React props.children Ex

React props.children

 

함수나 클래스를 Tag형태로 사용할 때 자식에 추가 Tag를 넣어서 전달하고,
부모는 자식들을 모두 또는 선택적으로 render할 수 있다.

 

export function Func1Main(props: any) {
	return (
		<Func1>
			<h1 className="Dialog-title">
				Welcome
			</h1>
			<p className="Dialog-message">
				Thank you for visiting our spacecraft!
			</p>
		</Func1>
	);
}

function Func1(props: any) {
	return (
		<div className={'FancyBorder FancyBorder-' + props.color}>
			Func1Main
			{props.children}
            {props.children[0]}
		</div>
	);
}