将道具传递给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是子级，从父级接收所有道具