React在单击时访问列表组件的属性

// 列表组件
class ListComponent extends React.Component {
  render() {
    const { data } = this.props; // 获取传递进来的列表数据
    // 渲染列表
    return (
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

// 父组件
class ParentComponent extends React.Component {
  render() {
    const listData = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ];
    return <ListComponent data={listData} />; // 将列表数据传递给列表组件的data属性
  }
}

// 渲染父组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));