Javascript 将函数传递给子组件

我正在创建一个简单的SPFX扩展来管理任务列表。我创建了一个列表，它通过pnpjs通过REST获取项目

我希望能够通过点击按钮删除上述项目。当我点击删除按钮时，一个模式（WarningModal）打开，要求确认。我已经成功地创建了一个有效的示例，但我很难理解它为什么有效。当我试图遵循官方文档（）中的指南时，我的代码无法正常工作

父组件中的渲染方法：

public render = (): React.ReactElement<ITakenbeheerProps> => {
const {
  taken,
  showErrorMessage,
  errorMessage,
  showSuccessMessage,
  successMessage,
  isDataLoaded,
  showTryAgainButton,
  showDeleteModal,
  deleteModalTitle,
  deleteModalContent,
  deleteModalOkCallback,
  deleteModalCancelCallback,
} = this.state;
const { ShimmerCollection } = this;
let AssignTaskModal = this.AssignTaskModal;
let addTaskIcon: IIconProps = { iconName: "AddToShoppingList" };

return (
  <Stack
    tokens={this.verticalGapStackTokens}
    className={styles.takenBeheer}
  >
    <ActionButton iconProps={addTaskIcon}>
      {strings.NieuweTaakButton}
    </ActionButton>

    {showErrorMessage ? (
      <MessageBar
        messageBarType={MessageBarType.error}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {errorMessage}
      </MessageBar>
    ) : null}

    {showSuccessMessage ? (
      <MessageBar
        messageBarType={MessageBarType.success}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {successMessage}
      </MessageBar>
    ) : null}

    <Stack horizontalAlign={"center"}>
      {showTryAgainButton && (
        <PrimaryButton
          text={strings.TryAgain}
          onClick={this._populateList}
        />
      )}
    </Stack>

    <ShimmerCollection />

    {isDataLoaded ? (
      <div>
        {taken.findIndex((t) => t.toegewezenAan.name == null) > -1 ? (
          <List
            items={taken.filter((t) => {
              return t.toegewezenAan.name == null;
            })}
            onRenderCell={this.onRenderCell}
          />
        ) : (
          <div className={styles.noNewTasks}>{strings.NoNewTasks}</div>
        )}
      </div>
    ) : null}

    <AssignTaskModal />
    <WarningModal
      isModalOpen={showDeleteModal}
      title={deleteModalTitle}
      content={deleteModalContent}
      okCallback={deleteModalOkCallback}
      cancelCallback={deleteModalCancelCallback}
    />
  </Stack>
);};

public render=（）：React.ReactElement=>{
常数{
拿，
这是一条信息，
错误消息，
展示成功信息，
成功消息，
已加载，
showTryAgainButton，
showdeletemodel，
DeleteModaltle，
删除ModalContent，
deleteModalOkCallback，
DeleteModalCancelBack，
}=本州；
常量{shimercollection}=此；
让AssignTaskModal=this.AssignTaskModal；
让addTaskIcon:IIconProps={iconName:“AddToShoppingList”}；
返回(

import*as React from“React”；
将*作为字符串从“CicOvlTakenlijstWebPartStrings”导入；
进口{
情态动词
对话框页脚，
默认按钮，
按钮
格瑟姆，
合并样式集，
方特权重，
}从“office ui fabric react”；
/*道具定义*/
导出接口IWarningModalProps{
isModalOpen：布尔型；
标题：字符串；
内容：字符串；
奥克：任何；
取消回调：任何；
}
/*国家定义*/
导出接口IWarningModalState{}
导出默认类WarningModal扩展React.Component<
我警告莫达尔普罗斯，
IWarningModalState
> {
公共构造函数（道具：IWarningModalProps）{
超级（道具）；
此.state={
/*状态初始化*/
伊斯莫达洛彭：错，
};
}
public render（）：React.ReactElement{
常数{
伊斯莫达洛本，
好的，
取消回调，
标题
内容,，
}=这是道具；
返回(
{title}
{content}
);
}
}

为什么这样做？我希望警告模式中的代码如下，带有箭头功能：

<DialogFooter>
            <DefaultButton onClick={() => okCallback()} text={strings.OkMessage} />
            <Button onClick={() => cancelCallback()} text={strings.CancelMessage} />
</DialogFooter>


okCallback（）}text={strings.OkMessage}/>
cancelCallback（）}text={strings.CancelMessage}/>

但是，当我单击按钮时，什么也没有发生。调试器也不会显示任何错误消息。
工作代码和非工作代码之间的唯一区别是目标函数中的“this.”等于什么。如果您可以发布完整的示例（包括“deleteModalOkCallback”的代码），可能会说得更多。我猜它会检查此字段是否丢失（在“this.”中），在这种情况下不会执行任何操作。请注意，通常建议使用bind（this）。
<DialogFooter>
            <DefaultButton onClick={() => okCallback()} text={strings.OkMessage} />
            <Button onClick={() => cancelCallback()} text={strings.CancelMessage} />
</DialogFooter>