时间戳

首页 > 解决方案 > React - 与另一个组件的状态交互

javascript - React - 与另一个组件的状态交互

问题描述

我有一个简单的 React 计数器，它有一个 h2 显示从 0 开始的计数，它有三个按钮：递增 1、减 1 和重置计数。

在这个应用程序中，计数将是状态，并且由于它是一个很小的示例，因此只制作一个组件是有意义的，例如：

const body = document.querySelector("body");

class Counter extends React.Component {

    constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.incrementCount = this.incrementCount.bind(this);
        this.reduceCount = this.reduceCount.bind(this);
        this.resetCount = this.resetCount.bind(this);
    }

    incrementCount() {
        this.setState({
            count: this.state.count + 1
        });
    }

    reduceCount() {
        this.setState({
            count: this.state.count - 1
        });
    }

    resetCount() {
        this.setState({
            count: 0
        });
    }

    render() {
        return(
            <div>
                <Count count={this.state.count} />
                <button onClick={this.incrementCount}>+1</button>
                <button onClick={this.reduceCount}>-1</button>
                <button onClick={this.resetCount}>Reset</button>
            </div>
        );
    }

}

ReactDOM.render(
    <Counter />, body
);

这很好用。

然而，React 的目标之一是将 UI 分成组件，所以我想为按钮创建一个名为 Action 的单独组件，另一个名为 Count 的组件包含 h2 以及状态和那些操作按钮。问题是我无法在 Action 组件内为 onClick 事件创建函数，因为状态将在 Counter 组件中，并且 this 关键字的乐趣开始了。

尽管如此，我还是想出了一个解决方法，将 eventHandlers 作为道具传递，这样：

const body = document.querySelector("body");

class Count extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <h2>Count: {this.props.count}</h2>
    }

}

class Action extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <button onClick={this.props.increment}>+1</button>      
                <button onClick={this.props.reduce}>-1</button>      
                <button onClick={this.props.reset}>Réinitialiser</button>      
            </div>
        );
    }

}

class Counter extends React.Component {

    constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.incrementCount = this.incrementCount.bind(this);
        this.reduceCount = this.reduceCount.bind(this);
        this.resetCount = this.resetCount.bind(this);
    }

    incrementCount() {
        this.setState({
            count: this.state.count + 1
        });
    }

    reduceCount() {
        this.setState({
            count: this.state.count - 1
        });
    }

    resetCount() {
        this.setState({
            count: 0
        });
    }

    render() {
        return(
            <div>
                <Count count={this.state.count} />
                <Action 
                    increment={this.incrementCount}
                    reduce={this.reduceCount}
                    reset={this.resetCount}
                />
            </div>
        );
    }

}

ReactDOM.render(
    <Counter />, body
);

这也有效，但是当我寻找这个时，我没有看到这个解决方法。当然，我承认不太清楚如何寻找这个疑问。

这是一个好习惯吗？我还有什么办法可以做到这一点？

标签： javascriptreactjsecmascript-6

解决方案

制作可读且易于维护的组件的更智能和最简单的方法就足够了。

如果我重构您的组件，那么我将这样做： checkThisPen

当我创建一个函数？

  1. 为了代码的可读性，我将一堆代码移至特定函数。
  2. 如果我在整个文件中为某些逻辑重用代码的和平；然后我把这个逻辑变成一个函数并重用它。
  3. 如果该函数在项目中的多个组件或文件中使用，我会导出该函数。

当我创建一个组件？

  • 类似于我们在多个地方使用或用于重复过程时创建组件的功能。
  • 在您的情况下，我将创建一个 ActionButton 而不是 Action。它正在使用不同的道具执行 Button 的类似功能。

注意：将 ActionButton 视为 PureComponent 或 Fragment。查看有关 PureComponent 和 Fragment 的文档以获取更多信息。也可以使用 ES6 箭头函数来表示incrementCount(), reduceCount(), resetCount()。这样您就无需在渲染时为绑定函数而烦恼。

推荐阅读