Question

这可能是一件非常新手的事情，但是我不明白为什么触发复选框后组件不会重新呈现。它只是第一次发生。所以我有以下组成部分：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    }
  }
  render() {
    let array = [child];

    if (this.state.checked) {
      child = <Child />
    } else {
      child = null
    }

    onClick = e => {
      this.setState({checked: !this.state.checked})
    }

    return(
      <div>
        <label>
          <input
            type="checkbox"
            checked={this.state.checked}
            onClick={this.onClick.bind(this)}
          />
          <span>Checkbox</span>
        </label>
        {array}
      </div>
    )
  }
}
 export default Parent;

基本上，预期的行为是：

该组件呈现，checked的初始状态为false，因此未显示<Child />组件。
由于状态为true，因此触发了复选框，<Child />中的array组件。
该组件将呈现，显示<Child />。
该复选框被触发，将状态设置为false，
该组件呈现未显示<Child />，因为它应为null。

使用我的代码，步骤1、2、3可以按预期进行，但是当我取消选中该复选框时，该组件不会呈现，并且<Child />仍然存在。

此代码在概念上有什么错误，以及如何获得所需的行为？

Answer 1

首先，将onClick处理程序移出render
第二，我不确定您在child

中收到let array = [child];的位置

不要在组件上设置不存在的child变量，而应在this.state.checked中render为真时显示它

{this.state.checked ? <Child /> : null}

这是工作示例。

完整的源代码。

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Child = () => <div>I am a Child component</div>;

class Parent extends Component {
  state = {
    checked: false
  };

  onClick = e => {
    this.setState({ checked: !this.state.checked });
  };

  render() {
    return (
      <div>
        <label>
          <input
            type="checkbox"
            checked={this.state.checked}
            onClick={this.onClick.bind(this)}
          />
          <span>Checkbox</span>
        </label>
        {this.state.checked ? <Child /> : null}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

反应：复选框仅触发一次渲染

1 个答案: