내가 이것을 가지고 있다고 가정 해 봅시다.
// Parent component:
export default function() {
return (
<React.Fragment>
<Toolbar slot="fixed" bottom>
This will be fixed to bottom of page
{order.name}
</Toolbar>
</React.Fragment>
)
}
가능한 최소한의 코드로 부모 구성 요소를 만들고 싶습니다. 작은 부분으로 공유하여 도구 모음이 자식 구성 요소에 있으므로 다음과 같이 보일 것입니다.
// Parent component:
export default function() {
return (
<React.Fragment>
<MyAwesomeToolbar order={order} />
</React.Fragment>
)
}
// MyAwesomeComponent:
export default function(self) {
let { order } = self.props
return (
<Toolbar slot="fixed" bottom>
This will be fixed to bottom of page
{order.name}
</Toolbar>
)
}
첫 번째 예에서 도구 모음이 실제로 부모 구성 요소에서 하드 코딩되면 모든 것이 잘 작동합니다. 도구 모음은 페이지 하단에 있습니다. 그러나 두 번째 방법으로 수행 할 때 도구 모음은 고정 된 속성없이 페이지 하단에 배치되지 않고 페이지 중간에 떠 있습니다.
클래스 또는 단순한 렌더링 파일 (.JSX)을 사용하여 구성 요소를 만들려고했습니다. 둘 다 작동하지 않았습니다.
부모에 배치 된 것과 동일한 속성 및 스타일로 자식 구성 요소를 렌더링하는 방법은 무엇입니까?
이동하면 작동합니까 <React.Fragment />?
// Parent component:
export default function() {
return (
<MyAwesomeToolbar order={order} />
);
}
// MyAwesomeComponent:
export default function(self) {
let { order } = self.props;
return (
<React.Fragment>
<Toolbar slot="fixed" bottom>
This will be fixed to bottom of page
{order.name}
</Toolbar>
</React.Fragment>
);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다