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

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

因此，检查数据是否存在，而不是检查它是否为空数组。

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