javascript - 在 React 中，父组件如何以编程方式更改另一个组件的 prop 或 state 值？

Question

我创建并渲染了另一个组件。单击按钮时，我想进行一些计算，然后更改其他组件上的一些 Prop ，以便它更新其 View 。我该怎么做？

如果它们需要是状态值而不是 Prop ，那也没关系。是否可以从另一个组件调用 setState()？

class MainComponent extends React.Component {

    other: null,

    constructor(props, children)
    {
        //Create the component
        this.other = ReactDOM.render( otherReactElement, document.body );
    }

...

    //An on Click handler
    handle: function(evt)
    {
        //This is what I want to do
        other.setProps( { aPropToChange: "new value" } );
    }
};

“setProps”已弃用。我还能做些什么来实现类似的功能？

Answer 1

如果你想将新的 Prop 传递给other，你必须用新的 Prop 再次调用ReactDOM.render()，如你所见here .

我创建了一个 jsfiddle您可以在其中看到如何正确更新 props 和 state。

class MainComponent extends React.Component {

    constructor(props)
    {
        super(props);
        this.other = ReactDOM.render( <Hello name="World"/>, document.getElementById('otherComponent') );
    }
    changeState(evt)
    {
        this.other.setState({lastName: "setState works"})
    }
    changeProps(evt){
        this.other = ReactDOM.render( <Hello name="New Name" /> , document.getElementById('otherComponent') );
    }
    render(){
        return <div>
            <button onClick={this.changeState.bind(this)}>Change state</button>
            <button onClick={this.changeProps.bind(this)}>Change props</button>
            </div>
    }
};