Question

我有一个简单的切换组件反应，我很不确定为什么它不起作用。另外，如果我使用箭头功能，我仍然必须绑定（这）？

class MyComponent extends React.Component {
  construtor(props){
    super(props);
    this.state = {visibility: false};
  }

  toggleVisibility = () => {
    this.setState({
      visibility: !this.state.visibility
    });
  }

  render() {
    if(this.state.visibility) {
      return (
        <div>
          <button 
            onClick={this.toggleVisibility}>Click</button>
          <h1>now you see me</h1>
        </div>
      );
    } else {
      return(
      <div>
       <button 
         onClick={this.toggleVisibility}>Click</button>
      </div>
      );
    }
  }
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

Answer 1

你有一个错字。建立 c tor，而不是construtor。

constructor(props){
  super(props);
  this.state = {visibility: false};
}

修复错字后效果很好。

Answer 2

我会做两处修改。首先，您不能像这样的箭头函数定义组件上的函数。这可能是它无法正常工作的原因。（是的，这意味着你需要bind()构造函数中的函数。）其次，我会重构你的渲染，只是有条件地显示你的<h1>标记，而不是整个组件。

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {visibility: false};
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }

  toggleVisibility() {
    this.setState({
      visibility: !this.state.visibility
    });
  }

  render() {
      return (
        <div>
          <button 
            onClick={this.toggleVisibility}
          >Click</button>
          {this.state.visibility ? <h1>now you see me</h1> : []}
        </div>
      );
  }
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

请注意这部分：{this.state.visibility ? <h1>now you see me</h1> : []}。这是一个内联的三元条件。这是一种非常常见的方法，可以根据简单的布尔值在JSX中显示或隐藏某些内容。使用花括号{}在JSX中嵌入表达式，其中三元条件将返回一个或另一个结果。 React不会像[]那样渲染空数组，因此当你想要渲染一个东西时，它就很方便了。

三元运算符条件如下所示：someBoolean ? resultIfTrue : resultIfFalse。

编辑：此外，constructor拼写错误，好抓@RyanHarvey。

简单的开/关切换组件不起作用

2 个答案: