Question

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

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

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

一切正常。

下一步，我想让我的第二页使用相同的组件-因为这似乎是合乎逻辑的事情。但是，我希望仅在单击输入后才触发日历。我会将选择的日期传递到下一页，因此文本字段中填充了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} />;

如果inline，这应该呈现true属性，如果false，则根本不渲染。

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

1 个答案: