单击按钮输出的组件输出错误

Question

我有2个按钮和有关DIV的信息。当我单击其中一个按钮时，一个组件应显示在DIV信息中。撤回组件div信息的错误在哪里？

import React, { Component } from 'react';
import Donald from '/.Donald';
import John from '/.John';
class Names extends Component {
  state = {
    array:[
      {id:1,component:<Donald/>, name:"Me name Donald"},
      {id:2,component:<John/>, name:"My name John"},
    ],
    currComponentId: null

   changeComponentName = (idComponent) => {
    this.setState({currComponentId:idComponent});
   };
   render() {
    return(
      <table>
        <tbody>
        <tr className="content">
        {
         this.state.array.map(item=> item.id===this.element.id).component
        }   
       </tr>
          <button className="Button">
            {
              this.state.array.map( (element) => {
                return (
                  <td key={element.id}
                    className={this.state.currComponentId === element.id ? 'one' : 'two'}
                    onClick={ () => this.changeComponentName(element.id)}
                    >{element.name}
                  </td>
                )
              }) 
            }
          </button>  
        </tbody>
      </table>
    )
  }
}
export default Names;

Answer 1

您在这里遇到了几个问题，第一个是您错过了状态上的结尾卷曲括号。this.element.id也不确定，我认为您是指this.state.currComponentId。

您的HTML也很糟糕，例如，您将多个<td> s插入按钮的内容中。我也看不到this.changeComponentName()的定义位置，所以我假设您的意思是this.showComponent()

主要问题可能在this.state.array.map(item=> item.id === this.element.id).component中，因为Map((返回数组。array.find((会更合适，尽管您仍然需要检查是否有匹配。

我可能会像这样重新编写您的组件(我已经将令人困惑的HTML换成了基本Divs，因为我不确定您在这里要做什么(

class Names extends Component {
  state = {
    array: [
      { id: 1, component: <span>Donald</span>, name: "Me name Donald" },
      { id: 2, component: <span>John</span>, name: "My name John" },
    ],
    currComponentId: null,
  };
  showComponent = (idComponent) => {
    this.setState({ currComponentId: idComponent });
  };
  render() {
    //Finding the selected element
    const selectedElement = this.state.array.find(
      (item) => item.id === this.state.currComponentId
    );
    return (
      <div>
        <div className="content">
          {
            //Check to see if there is a selected element before trying to get it's component
            selectedElement ? selectedElement.component : "no selected."
          }
        </div>
        {this.state.array.map((element) => {
          return (
            <button
              className="Button"
              key={element.id}
              className={
                this.state.currComponentId === element.id ? "one" : "two"
              }
              onClick={() => this.showComponent(element.id)}
            >
              {element.name}
            </button>
          );
        })}
      </div>
    );
  }
}

Answer 2

错误： - (1(您在标签中显示列表，而是显示为 <ul><li><button/></li></ul>
(2( You are not displaying content after comparison in map()
这是您问题的工作解决方案。<<<<<<<<<<<<<<

class Names extends React.Component {
  state = {
    array: [
      { id: 1, component: <Donald />, name: "Me name Donald" },
      { id: 2, component: <John />, name: "My name John" }
    ],
    currComponentId: null
  };
  clickHandler = idComponent => {
    this.setState({ currComponentId: idComponent });
  };
  render() {
    return (
      <div>
        <ul>
          {this.state.array.map(element => {
            return (
              <li key={element.id}>
                <button
                  className="Button"
                  onClick={() => this.clickHandler(element.id)}
                >
                  {element.name}
                </button>
              </li>
            );
          })}
        </ul>
        {this.state.array.map(data => {
          if (this.state.currComponentId === data.id)
            return <div>{data.component}</div>;
        })}
      </div>
    );
  }
}
const Donald = () => <div>This is Donald Component</div>;
const John = () => <div>This is John Component</div>;
ReactDOM.render(<Names />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />