Question

我正在尝试不呈现部分代码。我只想在答案正确/不正确时渲染它。在开始时，仅应显示问题和答案。 React给出了错误的论点“你错了”。状态设置为null。我检查了null是否等于false或true。为什么会渲染任何东西？在用户选择错误/正确答案之前，如何不呈现任何内容？代码：

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的情况下，我们才希望在其中执行代码。

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

2 个答案: