如何正确渲染jsx

Question

Javascript

所以我现在有了上面的代码。我想添加另一段js代码，如<div className="feedback"> {(this.state.finished) ? questions.map(function(x, index) { return <div> </div> }) : null} </div> 但不在map函数中，因为我只想渲染一次（目前每次渲染时都会渲染数组）

this.state.score

但这不起作用。那么如何在此块中添加我的代码呢？我也需要在三元内部

Answer 1

JSX中的三元表达式必须返回一个数组或一个节点，类似于React的render方法必须只返回一个节点。

<div className="feedback">
    { (this.state.finished) ?
      <div>
        {this.state.score}
        {questions.map(function(x, index) {
          return <div></div>
        })}
      </div>
      :
      null
    }
</div>

现在，三元组导致单个节点（<div>）基本上＆＃34;包裹＆＃34;你要条件渲染的所有东西。另请注意，questions.map包含在大括号{}中，因为您在更多内联JavaScript中嵌入了JSX内部的JavaScript。