ReactJs中如何扩展class组件实现多组计数器按钮的渲染

首先你现有的Counter组件已经自带独立的内部状态，每个组件实例的state互不干扰，只要先修复现有代码的语法和逻辑问题，直接多次渲染该组件即可实现6组独立计数器，具体步骤如下：

第一步：修复现有Counter组件的问题 #

你当前贴出的代码存在几处可修正的点：

• JSX标签未闭合：img标签、render返回的外层标签都缺少闭合标记
• 方法命名逻辑颠倒：handleDecrement方法现在执行的是加1逻辑，handleIncrement执行的是减1逻辑，和命名含义不符

修正后的完整Counter组件代码：

import React from 'react';

class Counter extends React.Component {
    constructor() {
        super();
        this.state = {
            cnt: 0
        };
    }

    // 加1操作，修正命名
    handleIncrement = () => {
        this.setState({
            cnt: this.state.cnt + 1
        });
    }

    // 减1操作，修正命名
    handleDecrement = () => {
        this.setState({
            cnt: this.state.cnt - 1
        });
    }

    render() {
        return (
            <div className = "btn">
                <div>
                    <img src= "images/cart.png" alt="cart" />
                </div>
                <button onClick={this.handleIncrement}>+</button>
                <p>{this.state.cnt} </p>
                <button onClick={this.handleDecrement}>-</button>
            </div>
        )
    }
}

export default Counter;

第二步：渲染6组独立计数器 #

你可以在父组件（比如App.jsx）中直接重复调用6次Counter组件，或者用数组循环渲染，两种方式都可以，实例之间的计数状态完全独立互不影响：

import React from 'react';
import Counter from './Counter'; // 按你的实际文件路径调整

class App extends React.Component {
    render() {
        return (
            <div className="counter-wrapper">
                {/* 方式1：直接写6次 */}
                <Counter />
                <Counter />
                <Counter />
                <Counter />
                <Counter />
                <Counter />

                {/* 方式2：循环渲染更简洁，替换上面6行即可 */}
                {/* {Array.from({length:6}).map((_, index) => <Counter key={index} />)} */}
            </div>
        )
    }
}

export default App;

原理说明 #

类组件的内部state是每个实例独立维护的，你每渲染一次<Counter />就会生成一个独立的组件实例，自带独立的cnt状态和操作方法，天然就满足多组计数器独立工作的需求。

内容的提问来源于stack exchange，提问作者S F