在React中加载li的onClick上的组件

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeComponent: null
    };
  }

  // ...
}

render() {
  const liItems = ['ComponentA', 'ComponentB', 'ComponentC'];

  return (
    <div>
      <ul>
        {liItems.map(item => (
          <li key={item} onClick={() => this.loadComponent(item)}>
            {item}
          </li>
        ))}
      </ul>
      {this.state.activeComponent && <this.state.activeComponent />}
    </div>
  );
}

loadComponent(componentName) {
  let componentToLoad = null;

  switch (componentName) {
    case 'ComponentA':
      componentToLoad = ComponentA;
      break;
    case 'ComponentB':
      componentToLoad = ComponentB;
      break;
    case 'ComponentC':
      componentToLoad = ComponentC;
      break;
    default:
      break;
  }

  this.setState({ activeComponent: componentToLoad });
}