时间戳

首页 > 解决方案 > 如何在反应中设置组件的条件属性

reactjs - 如何在反应中设置组件的条件属性

问题描述

我正在使用名为 react-flatpickr 的反应日期选择器插件。当我想要禁用 flatpickr 时，我需要在 Flatpickr 组件上设置一个名为“disabled”的道具。disabled 不是可以设置为 true 或 false 的布尔值。disabled 是没有值的属性。有没有办法仅在 readOnly 为真时才使用 disabled 属性初始化 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
                }}
            />
        );
    }
}

标签： reactjs

解决方案

当然，只需将disabled道具直接设置为您的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
        }}
    />
)

推荐阅读