时间戳

首页 > 解决方案 > 将 props 传递给 Children of Children（嵌套组件树）

javascript - 将 props 传递给 Children of Children（嵌套组件树）

问题描述

我不确定这是否可能，但这是我想在 Reactjs 中实现的目标：

<Comp1>
  <Comp2 />
  <Comp3>
    <Comp4 />
  </Comp3>
</Comp1>

所以我想做的是，我想使用React.cloneElement APIComp1将一个 prop 从一个组件注入到另一个组件。这样，如果我想将一个道具或一组道具传播到可能是层次结构中第 6 级的孩子，我应该能够做到这一点。Comp4

但到目前为止我设法实现的是，道具被注入到直接的孩子身上，而不是孩子的孩子身上。

这是我的努力：https ://codesandbox.io/s/x2q06l5z64

我想我已经把问题说清楚了，如果有混淆，你可以问它。

标签： javascriptreactjs

解决方案

这是 react 的context API的一个经典用例。

const MyContext = React.createContext('');

class Parent extends React.Component {
  render() {
    const { message } = this.props;
    return (
      <MyContext.Provider value={message}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(message) => (
          <div style={{ border: '1px solid #ccc' }}>
            <h3>Child</h3>
            {message}
          </div>
        )}
      </MyContext.Consumer>
    )
  }
}

class App extends React.Component {
  state = { message: 'default message' }
  handleChange = ({ target }) => this.setState({ message: target.value })
  render() {
    const { message } = this.state;
    return (
      <div className="App">
        <input value={message} onChange={this.handleChange} />
        <Parent message={message}>
          <div className="some-child">
            <div className="some-child">
              <div className="some-child">
                <div className="some-child">
                  <Child />
                </div>
              </div>
            </div>
          </div>
        </Parent>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

推荐阅读