只需轻触按钮ReactJS即可输出组件

Question

我有2个按钮，当我点击其中一个时，组件将显示在div信息中。如何制作它，以便无论我们有多少按钮（假设我们有50个按钮）和50个不同的组件显示？它应该是普遍的。

import React, { Component } from 'react';
import Donald from '/.Donald';
import John from '/.John';

class Names extends Component {
    state = {
      array:[
        {id:1,name:<Donald/>},
        {id:2,name:<John/>},
      ]
    };


   showComponent = (id,name) => {
    return this.state.array.map(() =>
      <button key={id}>{name}</button>
    )
   };

  render() {
    return(
      <div>
        <div className="info">{this.name}}</div>
        <div>
          <button onClick={ () => this.showComponent(1) }>My name Donald</button>
          <button onClick={ () => this.showComponent(2)}>My name John</button>
        </div>
      </div>
    )
  }
}

export default Names;

Answer 1

我认为你误解了用于哪些组件。你应该永远不会在页面上有50个不同的组件。

而不是为唐纳德和约翰组成一个组件，为什么你没有<Person>组件，并通过它的道具传递有关个人的相关数据。

我知道这可能实际上并不是你的真实用例，但通常会有一个更合理的解决方案，然后有这么多不同的组件。