从两个不同的组件更新相同的变量

Question

我想使用相同的状态变量说计数和更新并检索更新的变量。

我将以下代码编写为一个由一个按钮和一个标签组成的高阶组件。两者都更新计数，但它们有不同的实例。那么我怎样才能重新对齐我的代码以保持变量计数的相同副本。

const HOC = (InnerComponent) => class extends React.Component{
    constructor(){
        super();
        this.state = {
            count: 0
        }
    }
    update(){
        this.setState({count: this.state.count + 1})
    }

    render(){
        return(
            <InnerComponent
                {...this.props}
                {...this.state}
                update = {this.update.bind(this)}
            />

        )
    }
};

class App extends React.Component {
    render() {
        return (
            <div>
                <Button>Button</Button>
                <hr />
                <LabelHOC>Label</LabelHOC>
            </div>
        );
    }

}

const Button = HOC((props) => <button onClick={props.update}>{props.children} - {props.count}</button>)

class Label extends React.Component{
    render(){
        return(
            <label onMouseMove={this.props.update}>{this.props.children} - {this.props.count}</label>
        )
    }
}

const LabelHOC = HOC(Label)

export default App;

Answer 1

你需要做一些“thinking-in-react”。

React 只是一个渲染库，它渲染状态，所以你需要考虑一下状态应该放在哪里。您的场景通常会开始查看某种可以处理此 "one source of truth" 的 Flux 库（仅将状态保持在一个位置），例如 Redux。如果您使用的是 Redux，那么 Redux 存储将为两个组件保持 "count" 状态，并且它们都可以更新和读取它，所以这将是我在长运行中的建议。但是要解决您眼前的问题，您必须让更高的组件保持状态，然后当然还要修改该状态，您可以通过将状态和更新函数作为道具传递给 children 来实现。

这是它的外观片段，只需将状态（计数）和更新函数发送到 child 组件。我排除了 HOC 组件，因为我认为它只会增加你的困惑。但我相信你可以想象它是如何工作的。 :)

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            count: 0
        }
     this.update = this.update.bind(this); //Bind it once
    }
    update(){
        this.setState({count: this.state.count + 1})
    }
    render() {
        return (
            <div>
                <Button count={this.state.count} update={this.update}>Button</Button>
                <hr />
                <LabelHOC count={this.state.count} update={this.update}>Label</LabelHOC>
            </div>
        );
    }
}

文档中的好读物：

Components and props

Data flows down

从两个不同的组件更新相同的变量

Update same variable from two different components

reactjs

react-jsx