将onClick处理程序函数编辑为引用顶级组件文件中道具中函数的节点模块中的react元素

Question

我正在使用coreui CDataTable来呈现一个表。

return (
<CDataTable
items={data}
fields={fields}
...
/>
)

一切都很顺利。然而，我需要在CDataTable组件的标题中添加一个额外的按钮，以便为客户端下载excel文件。我注意到CDataTable没有在表的标题中添加额外按钮的功能，所以我决定直接编辑节点包。据我所知。组件get在两个文件中被引用

在index.d.ts:中

interface CDataTable {
...
loadingSlot?: ChildElement;
loading?: boolean;
fields?: Array<any>;
...
}

在CDataTable.js 中

var CDataTable = function CDataTable(props) {
var _ref2;
var innerRef = props.innerRef,
overTableSlot = props.overTableSlot,
columnHeaderSlot = props.columnHeaderSlot,
sortingIconSlot = props.sortingIconSlot,
........

我使用他们的CButton组件在标题中添加了一个额外的按钮，并为该按钮提供了onClick功能：

React.createElement(CButton, {
className: "btn btn-primary mfe-2 excel-button",
onClick: function onClick(e) {
excelFunc(e)
}
}, "Excel indir")
var excelFunc = function excelFunc() {
excelButton && excelButton()
}

我还分别为proptypes添加了函数：

excelButton = props.excelButton;

excelButton: PropTypes.func

以及在TS文件和中

excelButton?: Function;

按钮渲染正确。然而，当我传递一个简单的函数时，道具：

...
excelButton = {() => console.log("hi")}

我得到一个错误，说excelButton没有定义。这里的问题是什么？

Answer 1

在尝试了不同的方法之后。。。

• 我添加了excelButton作为道具：

  excelButton = props.excelButton;
  

• 在组件proptype对象中也是：

  excelButton: PropTypes.func
  

• 然后我必须调用excelButton作为onClick事件中的一个函数：

  React.createElement(CButton, {
  className: "btn btn-primary mfe-2 excel-button",
  onClick: function onClick() {
  excelButton()
  }
  }, "Excel indir")