尝试重新使用组件并使属性成为条件

Question

我在我的申请中使用 React Datepicker。默认情况下，我想使用 "inline" 功能，以便在页面加载时始终显示日历。我是这样完成的：

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

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

一切正常。

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

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

我尝试过类似的方法，但没有成功：

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

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

感谢您的任何建议！

编辑

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

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>
);

在 "page 2" 我想要这样的东西：

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

显然，这不是正确的语法，但我想将 inline 设置为 false/remove 该道具。我不确定 where/how 在较低的组件级别设置它。

Answer 1

您绝对不想仅仅因为一个组件有额外的道具集就创建单独的组件，使道具可配置并将它们解构到组件中，例如

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

如果 true 这应该呈现 inline 属性，如果 false.

则根本不呈现

尝试重新使用组件并使属性成为条件

Trying to re-use a component and make a property conditional

reactjs

react-datepicker

尝试重新使用组件并使 属性 成为条件

Trying to re-use a component and make a property conditional

reactjs

react-datepicker

尝试重新使用组件并使属性成为条件