Question

我有一个简单的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的单独组件，一个包含h2以及状态和状态的Count组件操作按钮。问题是我无法在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
);

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

这是一个好习惯吗？我还能通过什么其他方式呢？

Answer 1

以更聪明，最简单的方式来制作易于阅读且易于维护的组件，那么它们就足够好了。

如果我重构了你的组件，那么我会这样做：checkThisPen

我创建函数时是什么

为了使代码易于阅读，我将一堆代码移至特定位置功能。
如果我为整个文件中的某些逻辑重用代码的稳定性；然后，我将该逻辑变成一个函数并重复使用。
如果该功能在项目中的多个组件或文件中使用，我将导出该功能。

我何时创建组件？

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

注意：：将ActionButton视为PureComponent或Fragment。查看有关PureComponent和Fragment的文档以获取更多信息。还对incrementCount()，reduceCount()，resetCount()使用ES6箭头功能。这样您就不必在渲染时费心地绑定一个函数。

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

1 个答案: