时间戳

首页 > 解决方案 > 如何在 Typescript 中声明一个 React 组件扩展包组件？

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

问题描述

我正在寻找一种方法来声明一个 React 组件，该组件使用我自己在 Typescript 中的道具扩展现有组件。源组件是来自react-d3-treenpm 包 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} />
}

我的问题是如何正确覆盖接受作为参数onNodeClick的道具？我想有一个参数，其中扩展提前谢谢ReactD3TreetargetNode: RawNodeDatumtargetNode: MyNodeMyNodeRaNodeDatum

标签： reactjstypescript

解决方案

如果我理解正确，您想将一个额外的参数传递给您的 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")} /> }

推荐阅读