javascript - react : Failed to compile

Question

好吧，我有多个问题，(或多或少是基本问题)

第一个问题:当我做类似的事情时

class App extends Component {
  state = {
    person: [
    {id: "name1n", name: "Rohit", age: 24},
    {id: "name2l", name: "Hariom", age: 23},
    {id: "name3g", name: "Vaibhav", age: 58}
  ],
  someOtherState: "Untouched state",
  showPerson: false
}


var apple = 10; 

在渲染之前，它会抛出一个错误，指出编译器失败 var apple但如果我在渲染中做同样的事情，如 render( var apple = 10; );它不会抛出错误。有人可以解释一下原因吗？

第二个问题内部渲染，当我做这样的事情

  render() {
const style = {
  width: '150px',
  margin: 'auto',
  color: 'white',
  padding: '5px',
  backgroundColor: 'green',
  marginBottom: '10px'
};

var apple = 10;
console.log(apple) // -> This log
    let person = null;
    if (this.state.showPerson) {
      person= (
        <div>
          {
            this.state.person.map((el, index) => {
              return <Person
              key={el.id}
              click={this.deletePersonHandler.bind(index)}
              name={el.name}
              age={el.age}
              changed={(event) => this.eventSwitchHandler(event, el.id)} />
            })
          }
       </div>
     );
    style.backgroundColor = 'red'
    apple = 20;
    console.log(apple) // -> This log
    }
  return (
  <div className="App">
        <h1> Hi I am react App</h1>
        <button style={style}
        onClick={this.togglerPersonHandler}>Button</button>
        {person}
    </div>
     )
   }
}

它记录10在显示 20 之前在控制台中两次，问题是为什么它显示 number 10 twice 在显示 20 之前？难道不应该只是 console.log -> 10 然后 20 吗？而不是 10 -> 10 -> 20？

第三个问题当我单击按钮时，它会将背景颜色更改为红色，当我再次单击它时，它会恢复为绿色这是我的 togglePersonH​​andler，它会在单击按钮时更改 If 条件的状态 (showPerson)

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

我的第三个问题是，为什么当我再次点击它时它会自己变成原来的颜色(绿色)？我通常用 else 条件来做

Answer 1

您的第一个示例无法编译，因为您无法在 class 范围中声明变量。您只能声明该类的属性:

class Foo {
    aProperty = "Foo";

    static aStaticProperty = 42;

    aFunction() {
         console.log("I am a function");
    }

    static aStaticFunction() {
        console.log("I am a static function");
    }   
}

render() 只是一个必须在每个 React 组件类中声明的函数。

您的第二个示例可能会显示该行为，因为每次状态或 Prop 更改时组件都会调用其 render() 函数。因此，在第一次渲染时， this.state.showPerson 可能是 false，这样你的第二个 console.log() 就不会被调用(因为它是在条件 block 中)。第二次调用时，this.state.showPerson 已更改为 true，因此两个 console.log() 都被执行。