具有自定义 React 组件返回对象对象的 D3 组织结构图

Question

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

我想使用自定义 React 组件来设置组织结构图中每个节点的样式，但是当我尝试将节点内容设置为 React 组件时，它 returns {object Object} 而不是实际呈现组件。

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

这里我尝试将节点内容设置为<TestOrgCard/>，但是如您所见，它没有呈现。

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

Answer 1

您不能 return 传递给 .nodeContent() 的函数中的 React 组件，它必须是 HTML 字符串。因为你想渲染一个现有的反应组件，你可以使用 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} />
          );
        })

具有自定义 React 组件返回对象对象的 D3 组织结构图

D3 Org Chart with custom React components returning object Object

javascript

orgchart

d3.js

reactjs