如何在反应中将信息传递给嵌套组件？

Question

说我有

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

（其中component1有一个子component2，component2有一个子component3，component3有一个子component4）

并说我想将一些东西从 component1 传递到 component4 。我需要将道具传递给链条吗？所以组件1->组件2->组件3->组件4

?

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

Answer 1

这里有两个主要选项：

1. 传递道具。
2. 使用context API

使用props，您还有两个主要选项：

1. 你可以通过 props 隐式传递

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

   为隐式 props 运行 sn-p：
   

   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 运行 sn-p：

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，您可以跳过关卡并从祖父母那里“抓取”道具。
这就是react-redux does behind the scenes。

上下文 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 库的一部分，它已被提取到另一个库 @987654338 @.

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

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

Answer 2

你可以使用 React 的内置 Context API，虽然我不建议你过分依赖它，因为这要么会被弃用，要么会成为一个完全稳定的功能。截至目前，Facebook 在他们的文档WARNING 中警告用户。如果没有这个问题，API 就非常棒了，它有助于维护整洁的代码，而无需一直将 props 发送给预期的后代。

CONTEXT API

组件 1

class Component1 extends React.Component {
  getChildContext() {
    return {
      yourProp: "someValue" // you can also add a function like yourProp: someFunc
    };
  }

  render() {
    <Component2 />
  }
}

Component1.childContextTypes = {
  yourProp: PropTypes.string
};

组件 2

class Component2 extends React.Component {
  render() {
    return (
      <Component3 />
    );
  }
}

组件 3

class Component3 extends React.Component {
  render() {
    return (
      <Component4 />
    );
  }
}

组件4

class Component4 extends React.Component {
  render() {
    return (
      <div>
        {this.context.yourProp}      
      </div>
    );
  }
}

Component4.contextTypes = {
  yourProp: PropTypes.string
};

如果你不选择使用这个，有很多策略。

• REDUX
• 事件发射器
• 将道具一路传给后代

Answer 3

是的，只使用 React 你需要通过每个组件传递 props，即使组件不使用该 props。因此，在您的示例中， control2 和 control3 并不关心道具，而是需要将其传递下去。以下是您需要做的事情。

<Control1 test={this.state.test}>
  <Control2 test={this.props.test}>
    <Control3 test={this.props.test}>
      <Control4 test={this.props.test} />
    </Control3>
  </Control2>
</Control1>

这可能会很麻烦，所以redux 可以提供帮助。