이에 반응 라우터 Dom v4 예 https://reacttraining.com/react-router/web/example/auth-workflow 나는 그PrivateRoutecomponent destructures 나머지 prop 다음과 같이
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
내가 원하는지를 확인하기 위한{구성 요소:구성 요소,...나머지 부분}
의미합니다:
에서
소
,을 얻을 소품 구성 요소와 그런 다음 다른 모든 소품은 당신에게 주어진 이름 바꾸기소품이
에서나
피할 수 있도록 지명된 문제의 소품을 전달되는 경로는`렌더링 기능
Am I right?
Sorry,내가 깨달은 내 처음 응답(희망하는 동안 계속 제공하는 유용한 추가적인 컨텍스트)지 않't 귀하의 질문에 대답합니다. 나에게 다시 시도하십시오.
당신이 질문한다:
하고 싶다는
{구성 요소:구성 요소,...나머지 부분}
의미합니다:에서
소
,를 얻을 구성 요소
버팀대 및 그런 다음 다른 모든소품은
주어 당신,그리고 이름을 바꾸소품이
에서나
피할 수 있도록 지명된 문제소품은
전달되는 경로는`렌더링 기능
You'재 해석되지 않은 아주 정확합니다. 귀하의 생각에 기반하지만,그것은 당신 같은 소리'다시 적어도 알고 있다는 사실 여기에 무슨 일이 일어나고 있는지 금액이 어떤 종류의객체를 선언 및(참조 두 번째로 응답하고 의견이에 대한 자세한 설명).
을 정확하게 설명하자,'s 뜨{구성 요소:구성 요소,...나머지 부분}
식이 두 개로 분리 운영:
구성 요소의 속성에 정의된
소품(_Note_ 소문자:**c**omponent)및 할당하는 새로운 위치 상태에서 우리는
구성요소`(Note:자본Component).소품은
개체를 수집 안에 그들을 인수라는rest
.중요한 점은 당신이'다시되지 않 이름 바꾸기소품이
rest. (그리고 어린이 수영장 등이 마련되어 있 노력 할"의 이름을 지정하지 않습니 문제점과
소품은전달되는 경로는
렌더`기능이".)
rest === props;
// => false
귀하의 단순히 당 the rest(따라서 왜 인자를 지명하는)의 속성에 정의된소품은
개체로 새로운 논쟁이라는rest
.
const myObj = {
name: 'John Doe',
age: 35,
sex: 'M',
dob: new Date(1990, 1, 1)
};
이 예를 들어,그것은하는 데 도움이 될 수 있습니다 단지 생각의소품
으로는 동일한 구조(i.e., 속성 값)와 같이myObj
. 지금's 쓰는 다음을 할당합니다.
const { name: Username, ...rest } = myObj
문 위에 양을 모두선언과assignment의 두 개의 변수(또는,추측,상수). 문 생각할 수 있습니다 아웃:
을 속성
이름
에 정의된myObj
할당 값을 새로 변 우리는이름
. 그런 다음,다른 어떤 특성을 했 에 정의된myObj
(i.e.,나
,성별
및생년월일
)및 그들을 수집 으로 새로운 객체를 할당하는 변수 이름을 우리는rest
.
로깅사용자 이름
그리고나``콘솔
것을 확인합니다. 우리는 다음과 같다:
console.log(Username);
// => John Doe
console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }
이유제의 당기는
구성 요소 속성 을 변경하는 경우에만 그것은
구성 요소와 함께`자"C"?
네,그것은 보인다 매우 간단하다. 과하는 동안,그것은 표준 반응,연습이 있's 는 이유는 모두의Facebook's documentation에 프레임워크가 쓴다. 즉,이용자 지정 구성 요소를 렌더링 JSX 이 적은 연습 자체보다는 그것이 필요합니다. 반응하는,또는 더 제대로,JSX 은 경우 민감하지. 사용자 지정 구성 요소를 삽입없이 첫 글자는 대문자로 렌더링되지 않습니다 DOM. 이것은 단지 어떻게 반응하는 자를 식별하는 맞춤 구성 요소입니다. 따라서,그는 예지 또한 이름은구성 요소를
속성을 뽑아의소품
를구성 요소
,the<component{...소품}/>
식이 실패하여 렌더링니다.
그것은 당신이"퍼"모든 당신의소품에서
하나의 간결한 표현입니다. 예를 들어,'s 정소품은
수신PrivateRoute
구성 요소처럼 보인
// `props` Object:
{
thing1: 'Something',
thing2: 'Something else'
}
하고 싶은 경우에는 추가 손으로 이러한 항목(i.e., thing1
과thing2
)을 중첩<소>
표와 당신은 아't 에 익숙한개체 확산구문을 작성할 수 있습니다:
<Component
thing1={ props.thing1 }
thing2={ props.thing2 } />
그러나,{...소품}
구문성을 제거한 상세 정보할 수 있도록 함으로써 spread 당신의소품은
개체에서 같은 방법으로 수 spread 값의 배열(e.g., [...발]
). 다시 말해서,JSX 식은 아래와 그 위에 있는 정확히 동일합니다.
<Component { ...props } />
하실 수 있습 그것은 간단합니다. 에서 자바스크립트,경우 키 값 쌍은 동일 obj={계}같 obj={계정에}. 그렇게 전달할 때 소품에서는 부모가 아이를 구성 요소:
const Input = ({name,label,error, ...rest}) => {
return (
<div className="form-group">
<label htmlFor={name}>{label}</label>
<input
{...rest}
autoFocus
name={name}
id={name}
className="form-control"
aria-describedby="emailHelp"
/>
</div>
);
};
export default Input;
당신이 될 것이다 통과 휴식의 소품으로
label={label} placeholder={placeholder} type={type}