javascript - React 组件内的三元条件

Question

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

当按钮被单击一次时，第二次单击它不想重新识别(变量 prop showWarning 中仍然是 false 状态)。

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始终是true，并且三元总是进入第一个表达式。您可能想要:

 showWarning: !showWarning

或者如果您确实需要三元:

 showWarning: showWarning ? false : true