如何在React中的组件上设置条件属性

debugcn 发表于 Dev

贝克尔

我正在使用React Date选择器插件，称为react-flatpickr。当我希望禁用flatpickr时，我需要在Flatpickr组件上设置一个名为“ disabled”的道具。disable不是可以设置为true或false的布尔值。禁用是没有值的属性。是否只有在readOnly为true时才使用禁用的prop初始化Flatpickr组件的方法，而不是此可怕的重复代码？

getFlatPickr(id, ref, defaultDate, minDate, readOnly){
    if (readOnly) {
        return (
            <Flatpickr
                id={id}
                name={id}
                disabled
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat,
                }}
            />
        );
    } else {
        return (
            <Flatpickr
                id={id}
                name={id}
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat
                }}
            />
        );
    }
}

Treycos

当然，只需将disabledprop直接设置为您的readOnly变量：

getFlatPickr(id, ref, defaultDate, minDate, readOnly) {
        return (
            <Flatpickr
                id={id}
                name={id}
                disabled={readOnly}
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat
                }}
            />
        );
    }
}

甚至更短的语法：

getFlatPickr = (id, ref, defaultDate, minDate, readOnly) => (
    <Flatpickr
        id={id}
        name={id}
        disabled={readOnly}
        className="form-control"
        placeholder="MM/DD/YYYY HH:MM AM/PM"
        options={{
            enableTime: true,
            dateFormat: this.state.flatpickrDateFormat
        }}
    />
)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。