React - propTypes для родительского компонента, отображающего библиотеку?

У меня есть вопрос: я использую библиотеку react-dates datepicker и мне интересно: я не могу определить propTypes (например, когда я отображаю datepicker, я не использую никаких реквизитов), но что считается хорошей практикой реагирования в таком случае? Когда я не использую библиотеку, а сам пишу свой дочерний компонент, я сам определяю протипы внутри дочернего элемента и т. д., но что происходит, когда я использую библиотеку, где «их код» не так просто найти? В моем случае (см. код ниже), например, обязательно, чтобы свойство «startDate» было объектом. Было бы хорошо, если бы я каким-то образом определил его понимание моего компонента, чтобы другие могли легко увидеть, что ожидается? Я просто пытаюсь написать лучший код и думаю, что было бы лучше в таком случае. Спасибо!!

export default class App extends React.Component {
   render(){
      return (
         <DayPickerRangeController
            startDate={this.state.startDate} // momentPropTypes.momentObj or null,
            endDate={this.state.endDate} // momentPropTypes.momentObj or null,
            onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
            focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
            onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
         />
      )
   }
}

reactjs react-proptypes
person javascript2016    schedule 17.02.2018    source источник
comment
Лучше, если вы напишете его внутри компонента DayPickerRangeController , где вы определяете ir   -  person RIYAJ KHAN    schedule 17.02.2018
comment
Я не определяю DayPickerRangeController, вот причина моего вопроса - что делать, если я его не определяю - просто использую его, поскольку это библиотека   -  person javascript2016    schedule 17.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

export const DayPickerWrapper = (props) => <DayPickerRangeController {...props}/>;

DayPickerWrapper.propTypes = { /* Add additional validations here */ }

В остальной части вашего приложения вы можете использовать DayPickerWrapper вместо DayPicker.

Если вы действительно хотите избежать накладных расходов на оболочку, вы также можете напрямую изменить propTypes класса компонента:

DayPickerRangeController.propTypes = {
  ...DayPickerRangeController.propTypes,
  // Add custom validations here
}

И импортируйте его один раз перед использованием в рендере.

person lorefnon    schedule 17.02.2018