Question

我有一个包含state的父组件（App）。在这个组件中，我有一些代码通过事件处理程序来操纵状态。到目前为止一切都很好。

但是，我需要在子组件（ChildComponent）中显示当前的state。我试图通过将状态作为属性传递给ChildComponent来实现这一点，但是我失去了与状态的动态耦合。对状态的任何更改都不会反映在子组件中。

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render () {
        // This should get dynamically updated
        return <div>{this.props.value.toString()}</div>
    }
}


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: 1};
    }

    // Do stuff here that changes state

    render() {
         return <ChildComponent value={this.state.value} />
    }
}

works now: Updated correct example on codepen

此示例是我的问题的基本表示。我想我遵循官方文档的例子，特别是lifting state up。不知怎的，它不起作用。可能是我误解了文档（那些文档也恰好不太好）。

编辑：可能与子组件是一个类而不是一个函数有关吗？

Answer 1

您不应直接改变组件的状态（this.state.x = this.state.x + 1），而应使用setState。

有关其他信息，请参阅this question，以及React docs 使用对该主题所说的内容。

Answer 2

您应该使用setState。 setState始终触发重新渲染：

https://codepen.io/anon/pen/gmOzXg

Answer 3

这可以按预期工作：

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render () {
        // This should get dynamically updated
        return <div>{this.props.value.toString()}</div>
    }
}


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: 1};
        this.addOne = this.addOne.bind(this);
    }

    addOne(event){
      this.setState({value: this.state.value+1})
      console.log(this.state.value)
    }

    // Do stuff here that changes state

    render() {
         return (
             <div>
                 <button onClick={this.addOne}>add 1</button>
                 <ChildComponent value={this.state.value} />
             </div>
         )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

您可以对其进行测试here。

子组件的道具不与父级状态耦合

3 个答案: