javascript - 将 props 传递给 Children of Children(嵌套组件树)

Question

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

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

所以我想做的是，我想使用 React.cloneElement API 将 Comp1 组件的 prop 注入(inject)到 Comp4 组件中.这样，如果我想将一个 prop 或一组 prop 传播给层次结构中第 6 级以下的 child ，我应该能够做到这一点。

但到目前为止我设法实现的是， Prop 被注入(inject)到直接的 child 而不是 child 的 child 。

这是我为此付出的努力:https://codesandbox.io/s/x2q06l5z64

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

Answer 1

这是 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"/>