在React中的同一数组中，在2个不同的项中分别维护State

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['item1', 'item2', 'item3'],
    };
  }

  render() {
    return (
      <div>
        <ChildComponent1 items={this.state.items} />
        <ChildComponent2 items={this.state.items} />
      </div>
    );
  }
}

class ChildComponent1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: this.props.items.slice(0, 2), // 维护数组的前两个项
    };
  }

  render() {
    // 使用this.state.items进行渲染
    return (
      <div>
        {this.state.items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    );
  }
}

class ChildComponent2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: this.props.items.slice(2), // 维护数组的后一个项
    };
  }

  render() {
    // 使用this.state.items进行渲染
    return (
      <div>
        {this.state.items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    );
  }
}