如何在 Typescript 中声明一个 React 组件扩展包组件？答案

【问题标题】：How to declare a React component extending package component in Typescript?如何在 Typescript 中声明一个 React 组件扩展包组件？
【发布时间】：2021-01-03 02:55:15
【问题描述】：

我正在寻找一种方法来声明一个 React 组件，该组件使用我自己在 Typescript 中的道具扩展现有组件。源组件是来自react-d3-tree npm 包 v2.0.0 的 ReactD3Tree。所以我有：

import ReactD3Tree from "react-d3-tree";
import { TreeProps } from "react-d3-tree/lib/Tree/types";
import { RawNodeDatum } from "react-d3-tree/lib/types/common";

interface MyNode extends RawNodeDatum {
   // some properties
}

interface MyProps extends TreeProps {
   onNodeClick: (targetNode: MyNode, event: Event) => any;
}

let MyTree: React.ComponentClass<MyProps>;


const MyComponentWithOtherOperations = () => {
    ...some more code here enter code here

    return <MyTree data={data} onNodeClick={handleNodeClick} />
}

我的问题是如何正确覆盖接受targetNode: RawNodeDatum 作为参数的ReactD3Tree 的onNodeClick 属性？我想将targetNode: MyNode 作为MyNode 扩展RaNodeDatum 的参数提前谢谢

【问题讨论】：

你打算如何使用ReactD3Tree？
@RameshReddy 我想覆盖接受节点作为参数的onNodeClick 方法。我想在那里有我的自定义节点。
TypeScript 支持多级继承。您可以扩展扩展 React.Component 的 ReactD3Tree。这种方法有问题吗？ stackoverflow.com/questions/16839146/…
@AkhmediyarSailaubekov 我明白了你想要做什么。见 - codesandbox，custom nodes 的道具。

标签： reactjs typescript

【解决方案1】：

如果我理解正确，您想向 NodeClick 事件处理程序传递一个额外的参数。您正在寻找的是一个柯里化函数。

const nodeClickHandler = customprop => nodeValue => {
     console.log(customprop, nodeValue); 
};

const MyComponentWithOtherOperations = () => {
    ...some more code here enter code here

    return <MyTree data={data} onNodeClick={nodeClickHandler("your custom data")} /> }

【讨论】：