children 한 줄 요약

LikeChoonsik's·2022년 5월 29일
0

React

목록 보기
8/9
post-thumbnail

children

얘는 뭐 쓸 때마다 햇깔리고 설명하기도 햇깔린다. 그래서 메모

//메인페이지
import TopNav from '어디어디';
const index = () =>{
return
<div>
  <TopNav tilte={title} shareColor={shareColor}/>//변수 알아서 만들기
 </div>
}
export default index;

--------------------------------------------------------------------

//탑네비게이션
const TopNav = (props) => {
  return (
    <section >
      {props.share && <ShareIcon color={props.shareColor} />}
      {props.rightCancel && <RightCancelIcon />}
      <h1>{props.title}</h1>
    </section>
  );
};
export default FixedTop;


//얘가 props로 넘겨준 shareIcon
const ShareIcon = (props) => {
  return (
      <div
        onClick={() => {
         console.log('필요한거 알아서')
        }}
      >
        <img src={props.shareColor}/>
        </div>
  );
};
export default ShareIcon;


//얘가 props.로 넘겨준 rightCancel
const RightCancelIcon = () => {
  return (
    <div
      onClick={() => {
        console.log('필요한거 알아서')
      }}
    >취소이미지</div>
  );
};
export default RightCancelIcon;
-----------------------------------------------------------

위 같을 때 prop로 필요한 아이콘 계속 추가 할 필요 없이

//메인페이지
import TopNav from '어디어디';
//import 두개더
const index = () =>{
return
<div>
  <TopNav tilte={title} >
    <RightCancelIcon/>
    <ShareIcon shareColor={shareColor}>
    </TopNav>
 </div>
}
export default index;
-----------------------------------------------------------
//탑네비게이션
const TopNav = (props) => {
  return (
    <section >
    {props.childern}
      <h1>{props.title}</h1>
    </section>
  );
};
export default FixedTop;


//얘가 props로 넘겨준 shareIcon
const ShareIcon = (props) => {
  return (
      <div
        onClick={() => {
         console.log('필요한거 알아서')
        }}
      >
        <img src={props.shareColor}/>
        </div>
  );
};
export default ShareIcon;


//얘가 props.로 넘겨준 rightCancel
const RightCancelIcon = () => {
  return (
    <div
      onClick={() => {
        console.log('필요한거 알아서')
      }}
    >취소이미지</div>
  );
};
export default RightCancelIcon;

으로 사용

profile
춘식이는 너무 귀엽습니다.

0개의 댓글