React将道具传递给所有子组件

React pass props down to all descendant Components

本文关键字：组件 React      更新时间：2023-09-26

用例是我想"毫不费力"地将特定的prop值传递给所有子代组件。不确定这在React中是否可能。

因此，与其这样做：

class Parent extends Component {
    constructor() {
        super(props);
        this.props.componentID = "123456";
    }
    render() {
        return <Child1 componentID={this.props.componentID} />
    }
}
class Child1 extends Component {
    render() {
        return <Child2 componentID={this.props.componentID} />
    }
}
class Child2 extends Component {
    render() {
        return <div>{this.props.componentID}</div>
    }
}

这样做：

class Parent extends Component {
    constructor() {
        this.props.componentID = "123456";
    }
    passComponentIDToAllDescendantComponents() {
        // Some super nifty code
    }
    render() {
        return <Child1 />
    }
}
// etc...

感谢的帮助

您可以使用上下文功能将数据传递给子级。在你的情况下，它可能看起来像这样：

class Parent extends Component {
    getChildContext() {
        return {componentID: "123456"};
    }
    render() {
        return <Child1 />
    }
}
Parent.childContextTypes = {
    componentID: React.PropTypes.string
};
class Child1 extends Component {
    render() {
        return <Child2 />
    }
}
class Child2 extends Component {
    render() {
        return <div>{this.context.componentID}</div>
    }
}
Child2.contextTypes = {
    componentID: React.PropTypes.string
};
相关文章：