使用组件外部组件的功能做出反应？

Question

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(),
        })
    }

    ....

The const DayScaleCell overrides an element in an external component that I am using in the Calendar component. I am trying to change a state when I click that element when it is clicked.

https://codesandbox.io/s/llqmkq887

This is the demo that I followed, and the demo console.log s the date clicked. I was trying the get the date of the clicked date (eg 19) and assign it to the currentDate state in my component.

However, my way gives me an error TypeError: Calendar.changeCurrDate is not a function . What would be a way to do this?

Answer 1

What you can do is to write DayScaleCell in some sort of high order function. That will accept additional data, and then returns component itself

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

Using it in Calendar component

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

Answer 2

Here is an example of how to pass a function to that component. https://codesandbox.io/s/189zv041n4

The WeekView Component needed a change to allow for a function to be passed in

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

After that it is a simple matter of passing in the props and the function

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

The function that is being passed in increments the count state for the app class.