时间戳

首页 > 解决方案 > 轻触按钮即可输出组件 ReactJS

reactjs - 轻触按钮即可输出组件 ReactJS

问题描述

我有 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;

标签： reactjs

解决方案

我认为您误解了组件的用途。你真的不应该在一个页面上有 50 个不同的组件。

与其为 Donald 和 John 提供一个组件，不如你有一个<Person>组件，并通过它的 props 传递有关个人的相关数据。

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

推荐阅读