Попытка повторно использовать компонент и сделать свойство условным - PullRequest
Новая
       13

Попытка повторно использовать компонент и сделать свойство условным

0 голосов
/ 24 июня 2019

Я использую 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. Но это не похоже на работу. Или имеет смысл использовать здесь два разных компонента? Очевидно, я довольно новичок в разработке, поэтому, может быть, я просто пытаюсь сделать слишком много с одной и той же вещью, когда создание двух компонентов будет столь же простым.

Спасибо за любые предложения!

EDIT

Спасибо за ваши предложения! Я обнаружил, что это работает:

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 / удалить эту пропеллу. Я не уверен, где / как это установить - на нижнем уровне компонентов.

1 Ответ

1 голос
/ 24 июня 2019

Вы определенно не хотите создавать отдельные компоненты только потому, что у каждого есть дополнительный набор пропеллов, настраивайте реквизиты и деконструируйте их в компонент, например, 

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

Это должно отобразить атрибут inlineесли true и совсем нет, если false.

...