javascript - 如何将信息传递给 react 中的嵌套组件？

Question

说我有

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

(其中 component1 有一个子 component2，component2 有一个子 component3，component3 有一个子 component4)

并说我想将一些东西从 component1 传递到 component4 。我需要将 props 向下传递吗？所以组件 1 -> 组件 2 -> 组件 3 -> 组件 4

?

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

Answer 1

这里有两个主要选项:

1. 传递 Prop 。
2. 使用context API

使用 props 你还有两个主要选项:

1. 你可以隐式传递 props

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

   隐式 Prop 的运行片段:
   

   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>
   

   显式 Prop 的运行片段:

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>

---

至于context API，可以跳过关卡，“抢”爷爷奶奶的 Prop 。
这就是 react-redux does behind the scenes .

context 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。

另请注意，文档 advise against the usage of the context API :

If you aren’t an experienced React developer, don’t use context. There is usually a better way to implement functionality just using props and state.