时间戳

首页 > 解决方案 > 切换按钮工作但不在 React 中显示列表内容

javascript - 切换按钮工作但不在 React 中显示列表内容

问题描述

我编写了一个切换功能来在我按下按钮时显示一个列表。虽然我已经通过 console.log 进行了测试，但它返回了 a 但 div 里面没有任何内容，而且列表也没有按应有的方式在按钮下方创建，我看不出我做错了什么这里。

class App extends Component {
  state = {
    persons: [
      { name: "Leonardo", age: "26" },
      { name: "Margarete", age: "50" },
      { name: "Marcelo", age: "50" }
    ],
    otherState: "some other value",
    showPersons: false
  };

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({ showPersons: !doesShow });
  };

  render() {
    const style = {
      backgroundColor: "white",
      font: "inherit",
      border: "1x solid blue",
      padding: "8px",
      cursor: "pointer"
    };

    let persons = null;

    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map(person => {
            return
            <Person name={person.name} age={person.age} />;
          })}
        </div>
      );
    }

    return (
      <div className="App">
        <h1>MY APP</h1>
        <button style={style} onClick={this.togglePersonsHandler}>
          Toggle Persons
        </button>
        {persons}
      </div>
    );
  }
}

export default App;

根据要求 Person 组件

import React from 'react';

import './Person.css';

const person = ( props ) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
};

export default person;

标签： javascriptreactjs

解决方案

使用条件直接在 JSX 中呈现 div。你可以这样做：

  <div className="App">
    <h1>MY APP</h1>
    <button style={style} onClick={this.togglePersonsHandler}>
      Toggle Persons
    </button>
    { this.state.showPersons ? 
        <div>
          {this.state.persons.map(person => {
            <Person name={person.name} age={person.age} />;
          })}
        </div>
      : null
    }
  </div>

showPersons当且仅当解析为 thruthy 值时，这只会将 div 添加到 DOM 。

推荐阅读