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

Question

我正在尝试根据其中包含值的数组有条件地呈现。所以基本上如果 this.props.data == [] 不渲染。如果 this.props.data == [{data is here}] 渲染。

我尝试过的事情。

如果道具存在

{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> }

===长度未定义===

Answer 1

你可以试试这个：

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

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

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