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

Question

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

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

我正在从我的App.js 文件中传递startDate 和onChange 属性。

一切都很好。

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

我想让用户选择不同的日期，所以如果他们点击输入，日历就会呈现。在这种情况下，我确实不想要组件上的inline 属性。

我尝试过这样的事情，但没有运气：

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

将inline 传递为true 或false。但这似乎不起作用。或者，在这里只使用两个不同的组件是否更有意义？显然，我对响应式开发还很陌生，所以也许我只是想在同一件事上做太多事情，而创建两个组件同样容易。

感谢您的任何建议！

编辑

感谢您的建议！我发现这行得通：

App.js

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

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

ReservationCalendar.js

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

Calendar.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 应该呈现inline 属性，如果false 则根本不呈现。