Question

我弄清楚true/false方法中handleToggleClick()条件的问题是什么......

单击按钮后，第二次单击它不想重新编号（变量prop false中仍为showWarning状态。）

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: true ? false : true // this is where I have a problem.
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

Answer 1

 true ? false : true

总是false因为true总是真实的，而三元总是进入第一个表达式。你可能想要：

 showWarning: !showWarning

或者如果你真的需要三元：

 showWarning: showWarning ? false : true

React组件内的三元条件

1 个答案: