D3 组织图表，带有返回对象 Object 的自定义 React 组件

Question

我正在使用 React 和这个库创建一个组织结构图：https://github.com/bumbeishvili/org-chart。它使用 D3 创建组织结构图。

我想使用自定义 React 组件来设置组织结构图中每个节点的样式，但是当我尝试将节点内容设置为 React 组件时，它返回

{object Object}

而不是实际渲染组件。

请查看此 Stackblitz 以重现错误：https://stackblitz.com/edit/d3-org-chart-react-integration-hooks-oysugz?file=OrgChart.js

这里我尝试将节点内容设置为

<TestOrgCard/>

，但正如你所看到的，它没有渲染。

有人知道如何使用自定义 React 组件渲染卡片吗？

Answer 1

您无法从传递给

.nodeContent()

的函数返回 React 组件，它必须是 HTML 字符串。由于您想要渲染现有的 React 组件，您可以使用 ReactDOMServer.renderToStaticMarkup 来获取等效的 HTML 字符串。

import ReactDOMServer from "react-dom/server";
...
const TestOrgCard = (props) => {
  return (
    <div>
      <h5> {props.name} </h5>
    </div>
  );
};
...
        .nodeContent((d, i, arr, state) => {
          return ReactDOMServer.renderToStaticMarkup(
            <TestOrgCard {...d.data} />
          );
        })

Answer 2

但是之后，我们就无法在 TestOrgCard 中添加任何事件了。