Javascript ReactJS：仅当数组有值时才渲染元素

如果数组有值并且存在，我只希望将数组值渲染为元素。在我的例子中，有一个颜色数组，用户可以设置当前的颜色主题，该主题由其索引表示。开始时，不应选择颜色主题。我的渲染函数将尝试渲染当前颜色主题，但没有当前颜色索引。如何在渲染前检查是否存在颜色？我不能在重新渲染之前编写返回，因为还有其他元素需要渲染

 data = {
   "colorthemes" : [ ["blue","red"], ["black","grey"] ],
   "current_color_index": "", 

   ....//more 
 }


    render: function() {

    return (
        <div>
            <ul>
                //other stuff is rendering
            </ul>
            <ul>
                    {this.state.data.colorthemes[this.state.data.current_color_index].map(function(item, i) {
                      ....
                    }, this)}  
            </ul>
       </div>

数据={
“颜色主题”：[“蓝色”、“红色”]、[“黑色”、“灰色”]，
“当前颜色索引”：“”，
..//更多
}
render:function（）{
返回(

//其他的东西是渲染


{this.state.data.colorthemes[this.state.data.current\u color\u index].map（函数（项，i）{
....
}，这个）}

只需在

jsx

中使用if条件，类似

{
    condition ?
    <MyRenderElement /> :
    null
}

{
条件
:
无效的
}

如果不满足条件，则此代码块不会呈现任何内容

---

建议：我建议您使用合理的默认值，而不是使用这样的if条件。帮助您保持较少的控制流路径和较少的错误。

只需在

jsx

中使用if条件，类似于

{
    condition ?
    <MyRenderElement /> :
    null
}

{
条件
:
无效的
}

如果不满足条件，则此代码块不会呈现任何内容

---

建议：我建议您使用合理的默认值，而不是使用这样的if条件。这有助于您保持较少的控制流路径和较少的错误。

我认为您可以用一种更简单的方式来做，如：

{ condition && <MyRenderElement/> }

{condition&&}

---

我想说，这对你的情况更有意义。

我想你可以用一种更简单的方式来做，比如：

{ condition && <MyRenderElement/> }

{condition&&}

---

我想说，这对您的情况更有意义。

循环中断，我可以在循环中的何处放置条件？->.map（函数（项，I）…您错误地使用了函数式编程结构。首先

map

所有内容，然后使用

filter

删除所有不需要的内容。循环中断，我可以在循环中的何处放置条件？->.map（函数（项，I）…您错误地使用了函数式编程结构。首先

map

所有内容，然后使用

filter

删除所有不需要的内容。