將道具傳遞給es6中的子組件

Question

使用es6將props從父組件傳遞到子組件有點麻煩。

 // Parent component const Carousel = () => ( <nav className="projects-nav"> <div className="projects-nav__wrapper"> <CarouselItem title="Mowat" client="Jon Mowat" image="/images/mowat.jpg" icon="images/icons/video.svg" url="/mowat.html" /> </div> </nav> ); // Child component const CarouselItem = () => ( <div className="project project--mowat"> <Letter /> <Title /> <Description /> </div> ); // Child component where prop is inserted const Title = ({ title }) => ( <a href="/mowat.html" className="project__title"> <h2>{title}</h2> </a> ); 

我是否需要將道具從Carousel傳遞到CarouselItem，然后傳遞到Title組件？

Answer 1

答案是肯定的。

在React 16.2和之前的版本中，您必須顯式地將props向下傳遞到組件樹以到達組件后代。

const CarouselItem = ({ title }) => (
  <div className="project project--mowat">
    <Letter />
    <Title title={title} />
    {/*    ^^^^^^^^^^^^^ pass prop to grandchild */}
    <Description />
  </div>
);

從React 16.3開始，您可以使用ContextApi跳過此操作並注入狀態以指定組件並規避實際的組件樹。

Redux或Mobx之類的庫也可以使用此功能，它們利用了非官方的 上下文api （與16.3 中發布的api不同）。

Answer 2

是的，最直接的方法是將道具通過CarouselItem如您所說。

const CarouselItem = (props) =>
    <div className="project project--mowat">
        <Letter />
        <Title title={props.title} />
        <Description />
    </div>

但是，在多個級別上執行此操作可能會有些笨拙，甚至被稱為“道具鑽探”。 為了解決這個問題，React 16.3中添加了一個新的上下文API，該API允許將數據向下傳遞到多個級別。 這是一篇很好的博客文章。

Answer 3

使用傳播運算符{...props}

const CarouselItem = (props) => (
  <div className="project project--mowat">
    <Letter />
    <Title {...props}/>
    <Description />
  </div>
);

CarouselItem是父級，Title是子級，從父級接收所有道具