尝试重用组件并使属性有条件

Question

我正在应用程序中使用React Datepicker。默认情况下，我希望使用“内联”功能，以便在加载页面时始终显示日历。我是这样做到的：

<DatePicker
    inline
    selected={ startDate }
    onChange={ onChange }
/>

我传递starDate和onChange属性从我的App.js文件。

一切都很顺利。

接下来，我想让我的第二页使用相同的组件——因为这似乎是一件合乎逻辑的事情。但是，我希望日历仅在单击输入时触发。我将选择的日期传递到下一页，因此文本字段填充为mm/dd/yyyy。

我想给用户选择不同日期的选项，所以如果他们点击输入，日历就会呈现。在这种情况下，我不希望组件上的内联属性。

我尝试过这样的事情，但运气不好：

<DatePicker
    inline={ inline }
    selected={ startDate }
    onChange={ onChange }
/>

传递内联作为true或false。但这似乎行不通。或者，在这里只使用两个不同的组件是否更有意义？显然，我对反应开发非常陌生，所以当创建两个组件时，也许我只是试图用同样的事情做太多。

感谢您的任何建议！

编辑

谢谢你的建议！我发现这是有效的：

一个pp.js

 this.state = {
     inline: 'inline',
     startDate: new Date(),
      ...
}

<ReservationCalendar
    inline={ this.state.inline }
    startDate={ this.state.startDate }
    onChange={ this.handleChange }
 />

预订日历。js

const ReservationCalendar = ({inline, startDate, onChange}) => (
    <div>
        <Calendar
            inline={ inline }
            startDate={ startDate }
            onChange={ onChange }/>
   </div>
);

日历js

const Calendar = ({inline, startDate, onChange}) => (
    <div>
        <DatePicker
            inline={ inline }
            selected={ startDate }
            onChange={ onChange }
        />
    </div>
);

在"第2页"我想有这样的东西：

const Calendar = ({inline, startDate, onChange}) => (
    <div>
        <DatePicker
            inline={ false }
            selected={ startDate }
            onChange={ onChange }
        />
    </div>
);

显然，这不是正确的语法，但我想将inline设置为false/删除该属性。我不确定在哪里/如何设置-在较低的组件级别。

Answer 1

你肯定不想仅仅因为有一个额外的道具集就创建单独的组件，让道具可配置并分解成组件，例如。

const props = {
  inline: // true / false, some conditional check,
  selected: startDate,
  onChange
};
...
<DateTimePicker {...props} />;

如果true而不是iffalse，则应该呈现inline属性。