如何正确渲染jsx

Question

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

所以我现在有上面的代码。我想在另一块的js代码this.state.score而不是内部的地图功能添加这样的，因为我只希望它渲染一次（目前它呈现每次映射阵列上的时间）

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

，但是这并未”工作。所以我怎么在这里添加我的代码？我也需要它在三元内

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>），基本上“包装”要有条件地渲染所有的东西。另外请注意，questions.map包装在花括号{}中，因为您在内嵌更多内联JavaScript的JSX内嵌入了内联JavaScript。