将 props 传递给 es6 中的子组件答案

【问题标题】：Passing props to child components in es6将 props 传递给 es6 中的子组件
【发布时间】：2018-03-18 19:05:59
【问题描述】：

在使用 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 组件？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

使用扩展运算符{...props}

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

CarouselItem 是父项，Title 是子项，从父项接收所有道具

【讨论】：

我不一定会将CarouselItem 拥有的所有道具传递给它的Title 孩子。 Title 组件不需要知道其他组件需要的某些道具（例如 Letter 和 Description）。
如果 props 超过 3 则有意义，类似于我们如何避免向函数和使用对象传递超过三个参数。 eslint.org/docs/rules/max-params
我同意，在这种情况下，我们应该以更简单的方式传递道具。但是，只会提取必要的道具（例如const titleProps = { prop1, prop2, prop3, ... }）并传播它们（<Title {...titleProps} />）。
是的，这是有道理的

【解决方案2】：

答案是肯定的。

在 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 等库也提供此功能，它们利用了 非官方 context api（与 16.3 中出现的不同）。

【讨论】：

【解决方案3】：

是的，最直接的方法是按照您的说法通过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.

【讨论】：