-
예제 코드
export function Func1Main(props: any) { return ( <div> <Childs1> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Message~ </p> </Childs1> <Childs2 component1={ <h2>component1</h2> } component2={ <h2>component2</h2> } /> </div> ); } function Childs1(props: any) { return ( <div> Childs1 {props.children} {props.children[0]} </div> ); } function Childs2(props: any) { return ( <div> Childs2 {props.component1} {props.component2} </div> ); }
명시적인 매개변수명 props.component1, props.component2에 값을 넣어서 전달하면
그것을 받은 component는 props.component1, props.component2를 각각 필요에 따라서 명시적으로 불러와 사용할 수 있다.실행결과
2022.11.19 - React props.children Ex
'React' 카테고리의 다른 글
React 에서 서버와 연동 (0) 2022.11.25 NodeJs & Typescript 기반에서 React 배포 (0) 2022.11.20 React 빌드와 테스트 (0) 2022.11.20 React Component setState (0) 2022.11.19 React props.children Ex (0) 2022.11.19 React Element 변수 Ex (0) 2022.11.19 React Event (0) 2022.11.19 생명주기 메서드 componentDidMount componentWillUnmount (0) 2022.11.19