如何将信息传递给React中的嵌套组件？

说我有

<component1>
     <component2>
           <component3>
                 <component4>

（其中组件1有一个子组件2，组件2有一个子组件3，组件3有一个子组件4）

并说我想将某些内容从 component1 传递到 component4 。我需要将道具传递到链条上吗？所以组件1 -> 组件2 -> 组件3 -> 组件4

?

请注意： 这些组件不在同一个文件中。所以在 component1.js 中我指的是<component2>在 component2.js 中我指的是<component3> etc.

这里有两个主要选项：

1. 把道具传下去。
2. Use the context API https://reactjs.org/docs/context.html

With props你还有两个主要选择：

1. 您可以隐式传递 props

   <Parent>
     <ChildOne {...props}>
       <ChildTwo {...props}>
       </ChildTwo>
     </ChildOne>
   </Parent>
   

   隐式 props 的运行片段：
   

   const ChildTwo = props => (
     <div>{`Child two says: ${props.myProp}`}</div>
   );
   
   const ChildOne = props => (
     <div>
       <ChildTwo {...props} />
     </div>
   );
   
   const Parent = props => (
         <div>
           <ChildOne  {...props} />
         </div>
       );
   
   ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
   <div id="root"></div>

2. 或者明确地表达出来

   <Parent>
     <ChildOne propOne={propOne}>
       <ChildTwo propOne={propOne}>
       </ChildTwo>
     </ChildOne>
   </Parent>
   

   显式 props 的运行片段：

const ChildTwo = (props) => (
  <div>{`Child two says: ${props.myProp}`}</div>
);

const ChildOne = props => (
  <div>
    <ChildTwo myProp={props.myProp} />
  </div>
);

const Parent = props => (
      <div>
        <ChildOne  myProp={props.myProp} />
      </div>
    );

ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

上下文API的运行示例:

const ChildTwo = (props, context) => (
  <div>{`Child two says: ${context.myProp}`}</div>
);

ChildTwo.contextTypes = { myProp: React.PropTypes.string }

const ChildOne = props => (
  <div>
    <ChildTwo />
  </div>
);

class Parent extends React.Component {

  getChildContext() {
    const { myProp } = this.props;
    return { myProp };
  }

  render() {
    return (
      <div>
        <ChildOne />
      </div>
    );
  }
}

Parent.childContextTypes = {
  myProp: React.PropTypes.string
};

ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

请注意，此示例使用的是 React v15，其语法为React.PropTypes已更改，自 React v16 起PropTypes不再是的一部分react库，它被提取到另一个库prop-types.

另请注意，文档建议不要使用 context API https://reactjs.org/docs/context.html#why-not-to-use-context:

如果您不是经验丰富的 React 开发人员，请不要使用上下文。那里 通常是仅使用 props 实现功能的更好方法 和状态。