Question

在下面的代码中，我没有在person对象中声明showPerson属性。但是正在取得结果。单击按钮时，按钮具有隐藏和显示内容。它对我来说很好。但是我仍然不确定为什么不声明对象的属性。请以最简单的方式进行解释。

import React, { Component } from "react";
import "./App.css";
import Person from "./Person/Person";

class App extends Component {
  state = {
    person: [
      { name: "Andrew", age: 32 },
      { name: "Stephen", age: 42 },
      { name: "Samuel", age: 62 }
    ]
  };

  changeTxt = () => {
    const doesShow = this.state.showPerson;
    this.setState({ showPerson: !doesShow });
  };

  render() {
    let person = null;

    if (this.state.showPerson) {
      person = (
        <div>
          <Person
            name={this.state.person[0].name}
            age={this.state.person[0].age}
          />
          <Person
            name={this.state.person[1].name}
            age={this.state.person[1].age}
            changed={this.changeMethod}
          />
          <Person
            name={this.state.person[2].name}
            age={this.state.person[2].age}
          />
        </div>
      );
    }

    return (
      <div>
        <button onClick={this.changeTxt}>Click here</button>
        {person}
      </div>
    );
  }
}

export default App;

Answer 1

您的问题不清楚，但是据我了解，您的代码有效，并且您想使代码更简单

如果如此分离，则将if-else分离到其他函数并进行渲染

    import React, { Component } from "react";
    import "./App.css";
    import Person from "./Person/Person";

        class App extends Component {
          state = {
            person: [
              { name: "Andrew", age: 32 },
              { name: "Stephen", age: 42 },
              { name: "Samuel", age: 62 }
            ]
          };

          changeTxt = () => {
            const doesShow = this.state.showPerson;
            this.setState({ showPerson: !doesShow });
          };


          renderPerson = () => {
              if (this.state.showPerson) {
              return (
                <div>
                  <Person
                    name={this.state.person[0].name}
                    age={this.state.person[0].age}
                  />
                  <Person
                    name={this.state.person[1].name}
                    age={this.state.person[1].age}
                    changed={this.changeMethod}
                  />
                  <Person
                    name={this.state.person[2].name}
                    age={this.state.person[2].age}
                  />
                </div>
              )
            }else{
                return null // your fallback
            }

          }

          render() {
            return (
              <div>
                <button onClick={this.changeTxt}>Click here</button>
                {this.renderPerson()}
              </div>
            );
          }
        }

        export default App;

Answer 2

如果您console.log(showPerson)尚未设置。您将看到它的undefined。但是设置后，您将看到它具有值。您不必初始化它们。

现在此代码仍然有效的原因是在javascript中有falsy和truthy值。这些值在if语句中作为true或false值进行响应。

undefined是一个伪造的值，因此在if语句中它像假的一样假装。并将值更改为此：!undefined。由于!falsy === true showPerson变为

React JS对象

2 个答案: