我不确定这是否可行,但这是我想在 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
我想我已经把问题说清楚了,如果有混淆,你可以问。
最佳答案
这是 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"/>
关于javascript - 将 props 传递给 Children of Children(嵌套组件树),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53763638/