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

    ....

const DayScaleCell会覆盖我正在Calendar组件中使用的外部组件中的元素。当我单击该元素时，我试图更改状态。

https://codesandbox.io/s/llqmkq887

这是我遵循的演示，演示console.log的点击日期。我正在尝试获取点击日期的日期（例如19），并将其分配到组件中的currentDate状态。

但是，我的方法给了我一个错误TypeError: Calendar.changeCurrDate is not a function。怎么做呢？

Answer 1

您可以做的是用某种高阶函数编写DayScaleCell。那将接受其他数据，然后返回组件本身

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

在Calendar组件中使用

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

Answer 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)}
            />

传入的函数将增加应用程序类的计数状态。

在组件之外使用组件的功能有反应吗？

2 个答案: