有条件地指定组件的道具

Question

如果 {type} === 'dateTime'，我想在下面的 ReactDatePicker 组件中包含 showTimeSelect 属性，否则我想忽略它，但它目前不起作用。我是 React 新手，因此非常感谢有关如何让它工作的指导。

这样做的目的是因为我在表单中使用 ReactDatePicker，有时我希望它显示为日期选择器，有时我希望它显示为时间选择器。方法是在 ReactDatePicker 组件中添加一个属性，即 showTimeSelect.

import React from 'react';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { Controller } from 'react-hook-form';
function FormDate({ name, question, register, control, type }) {

  const varShowTimeSelect = ({ type }) =>
    ({ type } === 'dateTime' ? { showTimeSelect } : {});

  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              {varShowTimeSelect} //Conditionally show showTimeSelect prop
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}
export default FormDate;

非常感谢，

凯蒂

Answer 1

在属性值中添加条件，因为 showTimeSelect 接受 boolean 类型：

<ReactDatePicker
  dateFormat="dd/MM/yyyy"
  placeholderText="Select date"
  showTimeSelect={type === 'dateTime'}
/>

function FormDate({ name, question, register, control, type }) {
  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              showTimeSelect={type === 'dateTime'}
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}

Answer 2

除了 Dennis 的建议（我认为在这种情况下这是更好的解决方案）之外，如果您想有条件地完全不通过 prop ，您需要使用 spread:

function FormDate({ name, question, register, control, type }) {

  const showTimeSelectProps = type === 'dateTime' ? { showTimeSelect: true } : {};

  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              {...showTimeSelectProps} //Conditionally show showTimeSelect prop
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}

有条件地指定组件的道具

Conditionally specify props of a component

reactjs

react-props