在 React / Formik 中有条件地渲染属性

Question

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

有没有比这个更优雅（干燥？）的方法：

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

Answer 1

如果你将 react prop 设置为 null，react 将忽略它：

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

Answer 2


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

<Input

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

在 React / Formik 中有条件地渲染属性

Conditionally render attributes in React / Formik

jsx

reactjs

formik