在React和发送参数中拆分Kendo内联编辑组件

Question

使用kendo-ui网格与react使用此示例

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing/editing/

我如何分开

class MyCommandCell extends GridCell {

来自父组件，以便我可以重复使用组件，如何将参数发送到组件？

试图这样做，但是直接的方式无法正常工作

Answer 1

将React高阶组件(HOC(放入单独的文件中：

export default function MyCommandCell(enterEdit, remove, save, cancel, editField) {
return class extends GridCell {
    render() {
        return !this.props.dataItem[editField]
            ? (
                <td>
                   <button onClick={(e) => enterEdit(this.props.dataItem)}> Edit
                   </button> 
                </td>
            );
    }
}
};

然后，您可以通过从文件中导入(例如：

(将其重复使用。

import MyCommandCell from './my-command-cell.jsx';

并用您需要传递到单元格的外部参数调用事件：

this.CommandCell = MyCommandCell(enterEdit,remove,save,cancel, "inEdit");