Question

如果数组具有值并且存在，我只想将数组值呈现为元素。在我的例子中有一系列颜色，用户可以设置当前的color_theme，它由索引表示。一开始就不应该选择color_theme。我的渲染函数将尝试渲染当前的color_color_theme，但是有noch current_color_index。如何在渲染之前检查是否存在现有的colorsheme？

我不能在redering之前写一个返回值，因为还有其他元素需要渲染。

 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>

Answer 1

只需在jsx内使用if条件，例如

{
    condition ?
    <MyRenderElement /> :
    null
}

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

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

Answer 2

我认为你可以用更简单的方式做到：

{ condition && <MyRenderElement/> }

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

ReactJS：只有数组有值时才渲染元素

2 个答案: