React TypeScript如何为每个实例化项添加同行计数器？

我看过类似问题，但自身情况有差异，目前卡壳了。需求是给每个列表项加上1、2这类计数，并且让计数和列表项显示在同一行。

当前代码实现 #

AttendeeListPage.tsx

class AttendeeListPage extends Component<any,any> {
        ...
        render(){
        let attendarr: any[] = [];
        let countArr : number[] = [];
        for (let i = 0; i < this.state.arr.length; i++){
            countArr.push(i+1);
            attendarr.push(<AttendeeBox
                email={this.state.arr[i][0]}
                status={this.state.arr[i][1]}
                eventNum={this.props.eventNum}
            />)
        }

        return (
            <div className='App'>
                <div>
                    {countArr}
                    {attendarr}
                </div>
            </div>
        );
        }
}

export default AttendeeListPage;

AttendeeBox.tsx

class AttendeeBox extends Component<any,any> {
    constructor(props:any){
        super(props);
        this.state = {id: this.props.eventNum(), updateForced: false, ForceUpdateNow: false}
    }
    componentDidMount(): void {
        this.setState({ForceUpdateNow:true})
    }
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void {
        if(this.state.id !== this.props.id){
            this.setState({id: this.props.id});  //should probably be id: this.state.id
        }
    }

    render() {
        return (
            <div className='AttendeeBox'>
                <div className='listElement'>
                    Email : {this.props.email}  &nbsp;
                </div>
                <div className='listElement'>
                    Status : {this.props.status}
                </div>
            </div>
        )
    }
}

export default AttendeeBox;

当前问题 #

目前计数器与列表框分离，显示在列表框上方，无法整合到同一行。

解决方案 #

方案1：组件传参实现行内计数

直接给AttendeeBox添加count属性，在组件内部渲染计数，再通过CSS调整布局。

1. 修改AttendeeBox，接收并渲染计数：

class AttendeeBox extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = { id: this.props.eventNum(), updateForced: false, ForceUpdateNow: false }
    }
    componentDidMount(): void {
        this.setState({ ForceUpdateNow: true })
    }
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void {
        if (this.state.id !== this.props.id) {
            this.setState({ id: this.props.id });
        }
    }

    render() {
        return (
            <div className='AttendeeBox'>
                {/* 渲染计数 */}
                <span className='item-count'>{this.props.count}.</span>
                <div className='list-content'>
                    <div className='listElement'>
                        Email : {this.props.email}  &nbsp;
                    </div>
                    <div className='listElement'>
                        Status : {this.props.status}
                    </div>
                </div>
            </div>
        )
    }
}

export default AttendeeBox;

2. 修改AttendeeListPage，传递计数参数，删除单独的countArr：

class AttendeeListPage extends Component<any, any> {
    ...
    render() {
        let attendarr: any[] = [];
        for (let i = 0; i < this.state.arr.length; i++){
            attendarr.push(<AttendeeBox
                count={i + 1} // 传递当前项的计数
                email={this.state.arr[i][0]}
                status={this.state.arr[i][1]}
                eventNum={this.props.eventNum}
            />)
        }

        return (
            <div className='App'>
                <div>
                    {attendarr}
                </div>
            </div>
        );
    }
}

export default AttendeeListPage;

3. 添加CSS布局样式：

.AttendeeBox {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* 计数与内容的间距 */
    margin-bottom: 12px;
}

.item-count {
    font-weight: bold;
    min-width: 22px;
    text-align: right; /* 数字靠右对齐，避免位数变化导致偏移 */
}

方案2：纯CSS计数器实现

如果不想修改组件逻辑，可以用CSS计数器功能自动生成计数，无需改动JS代码。

1. 修改AttendeeListPage的容器，添加类名：

return (
    <div className='App'>
        <div className='attendee-list'>
            {attendarr}
        </div>
    </div>
);

2. 添加CSS样式：

.attendee-list {
    counter-reset: item-counter; /* 初始化计数器 */
    padding-left: 28px; /* 给计数预留空间 */
}

.AttendeeBox {
    counter-increment: item-counter; /* 每个项递增计数器 */
    position: relative;
    margin-bottom: 12px;
}

.AttendeeBox::before {
    content: counter(item-counter) "."; /* 显示计数器值 */
    position: absolute;
    left: -28px; /* 调整计数位置 */
    font-weight: bold;
}

内容的提问来源于stack exchange，提问作者Mengzhu Ou