Использование функции компонента вне компонента в react?

#javascript #reactjs

Вопрос:

 const DayScaleCell = props => (
    <WeekView.DayScaleCell
      {...props}
      onClick={() => Calendar.changeCurrDate(props.startDate)}
    />
  );

class Calendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: fire.auth().currentUser.uid,
            data: appointments,
            currentDate: new Date(), // set to today's date by default
            message: '',
            open: false,
            selectedDate: new Date(),
        };
    }


    changeCurrDate = (date) => {
        this.setState({
            currentDate: date.getDate(),
        })
    }

    ....

Const DayScaleCell переопределяет элемент во внешнем компоненте, который я использую в Calendar компоненте. Я пытаюсь изменить состояние, когда я нажимаю на этот элемент, когда он нажат.

https://codesandbox.io/s/llqmkq887

Это демо-версия, за которой я следил, и в демо console.log -версии указана дата нажатия. Я пытался получить дату выбранной даты (например, 19) и присвоить ее currentDate состоянию в моем компоненте.

Однако мой способ выдает мне ошибку TypeError: Calendar.changeCurrDate is not a function . Каким был бы способ сделать это?

1. Создайте сервис с этой функцией и импортируйте сервис куда угодно. Таким образом, вы можете использовать эту функцию в любом месте.

2. @OrthoHomeDefense извините, я не понимаю, что вы имеете в виду.

3. changeCurrDate является ли метод экземпляром Calendar , а не самим классом.

4. @FelixKling как я мог это исправить?

5. Не уверен, я не знаком с этой библиотекой.

Ответ №1:

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

 const getDayScaleCellComponent = onCellClick => props => (
  <WeekView.DayScaleCell
    {...props}
    onClick={() => onCellClick(props.startDate)}
  />
);

Использование его в Calendar компоненте

 <WeekView
  startDayHour={9}
  endDayHour={19}
  dayScaleCellComponent={getDayScaleCellComponent(this.changeCurrDate)}
/>

Ответ №2:

Вот пример того, как передать функцию этому компоненту. https://codesandbox.io/s/189zv041n4

Компоненту WeekView потребовалось изменение, чтобы разрешить передачу функции

  const DayScaleCell = (props, func) => (
     <WeekView.DayScaleCell {...props} onClick={() => func()} />
);

После этого остается просто передать реквизит и функцию

 <WeekView
     startDayHour={9}
     endDayHour={19}
     dayScaleCellComponent={(e) => DayScaleCell(e, this.onChange)}
            />

Передаваемая функция увеличивает состояние подсчета для класса app.