Question

在使用es6将父级组件向下传递给子组件时遇到一些麻烦。

// 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及之前，您必须在组件树下显式传递道具以到达组件后代。

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

从React 16.3开始，你可以使用ContextApi跳过这个并注入状态来指定组件并绕过实际的组件树。

此功能也可用于Redux或Mobx等利用非官方 context api的库（与出现的不一样） 16.3）。

Answer 2

是的，最直接的方法是通过CarouselItem传递支柱。

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

但是，这样多级别的深度可能会变得有点笨拙，甚至得到了“螺旋钻”的名称。为了解决这个问题，在React 16.3中添加了一个新的上下文API，它允许将数据向下传递到多个级别。 Here's a good blog post about that.

Answer 3

使用传播运营商{...props}

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

CarouselItem是父级，Title是接收来自父级

的所有道具的小孩

将道具传递给es6中的子组件

3 个答案: