代码之家 › 专栏 › 技术社区 › Shawn Matthews

如果道具包含空白数组,则进行条件渲染

ecmascript-6 reactjs

Shawn Matthews · 技术社区 · 7 年前

我试图基于一个包含值的数组进行有条件的渲染。所以基本上如果这个。道具。数据==[]不渲染。如果这个。道具。数据==[{数据在此}]渲染。

我尝试过的事情。

如果道具存在

{this.props.data && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然渲染===

无效的

{this.props.data != null && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然渲染===

长

{this.props.data.length > 0 && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===未定义长度===

1 回复 | 直到 7 年前

Gleb Kostyunin 7 年前

您可以尝试以下操作:

{this.props.data && !!this.props.data.length && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

因此,请检查数据是否存在,然后检查它是否不是空数组。

但我建议将其拉到一个方法中,因为这样您的渲染方法会很快变得混乱。

推荐文章