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>。我也看不到this.changeComponentName()的定义，所以我假设您的意思是this.showComponent()

主要问题可能在this.state.array.map(item=> item.id === this.element.id).component中，因为map（）返回一个数组。虽然仍然需要检查是否存在匹配项，但array.find（）会更合适。

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

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）您正在标记中显示列表，而显示为dialup
（2）<ul><li><button/></li></ul>
，这是您问题的有效解决方案。 / p>

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'));

通过单击按钮产生的组件输出错误

2 个答案: