显示基于三元运算符的元素

Question

我试图不渲染我的部分代码。我只想在答案正确/不正确的情况下呈现它。一开始只应显示问题和答案。 React呈现错误的参数“你错了”。 State设置为null。我检查过，null不等于假也不是真的。它为什么呈现任何东西？如何在用户选择错误/正确答案之前不呈现任何内容？码：

export default class QuoteApp extends Component {
  constructor(props) {
    super(props)

    this.state = {
       index: 0,
       isCorrect: null
    }
  }

  confirmAnswer = () => {
      this.setState({
          index: this.state.index + 1
      })
  }

  handleClick = (e, index) => {
    if (e.target.textContent === data[index].name) {
      this.setState({
        isCorrect: true
      }) 
      } else {
        this.setState({
          isCorrect: false
        })
    }
  }

  render() {
      const { index, isCorrect } = this.state
      console.log(this.state)
    return (
      <div className="QuoteApp">
        <div className={ (this.state.isCorrect ? 'hide' : '') }>
          <Quote index={index}/>
          <Answers index={index}
                 handleClick={this.handleClick}
                 />
        </div>
        {isCorrect ?
        <h1>you're right</h1>
        :
        <h1>you're wrong</h1>}
        <button onClick={this.confirmAnswer}>Confirm</button>
      </div>
    )
  }
}

我想要

你是对的：你走错了，直到用户互动

Answer 1

使用&&运算符。只有用户互动才会看到你的对错

{isCorrect !== null && isCorrect && 
        <h1>you're right</h1>}
{isCorrect !== null && !isCorrect && 
        <h1>you're wrong</h1>}

当用户选择答案时，执行以下操作以隐藏引用/答案

使用&&运算符

    {isCorrect === null && <div className={ (this.state.isCorrect ? 'hide' : '') }>
      <Quote index={index}/>
      <Answers index={index}
             handleClick={this.handleClick}
             />
    </div>}

或三元运算符

 {isCorrect === null ? <div className={ (this.state.isCorrect ? 'hide' : '') }>
      <Quote index={index}/>
      <Answers index={index}
             handleClick={this.handleClick}
             />
    </div> : null}

Answer 2

你可以像这样写：

{ isCorrect !== null && 
  ( isCorrect ? <h1>you're right</h1> : <h1>you're wrong</h1> )
  || '' // To make sure we don't print boolean value in the UI
}

&&条件将满足isCorrect返回值。如果它是null，那么它将不会继续。我们将它们包装在括号中，因为我们只想在isCorrect不是null的情况下执行代码。