在 React / Formik 中条件渲染属性

如何解决在 React / Formik 中条件渲染属性

仅当屏幕尺寸低于特定屏幕尺寸时，我才需要在 Formik Input 上显示标签属性。为此，我需要有条件地呈现标签属性。

是否有更优雅（干？）的方式来做到这一点，而不仅仅是这样：

if (smallScreen) {
    <Input
        label="Unit"
        type="text"
        name="unit"
        value={values.unit}
    />  
} else {
    <Input
        type="text"
        name="unit"
        value={values.unit}
    />
}

解决方法

如果您将 react 属性设置为 null，react 将忽略它：

    <Input
        label={smallScreen ? "Unit" : null}
        type="text"
        name="unit"
        value={values.unit}
    /> 

,

const label =smallScreen? { label : "Unit"} : null

<Input

        type={smallScreen? Unit }
        name="unit"
        value={values.unit}
        {...label}
    />