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只是一个渲染库，它呈现状态，因此您需要考虑该状态应该存在的位置。您的场景通常会开始查看某种Flux库，它可以处理这种“一个事实来源”（仅在一个地方保持状态），例如Redux。如果您正在使用Redux，那么Redux存储将保持两个组件的“计数”状态，它们可以更新和读取它，因此从长远来看这将是我的建议。但要解决您的直接问题，您必须让更高的组件保持状态，然后当然也要修改该状态，您可以通过将状态和更新函数作为道具传递给子项来实现。

这是它看起来的片段，只是将状态（计数）和更新功能发送到子组件。我排除了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

从两个不同的组件

1 个答案: