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

Question

. Answers to this question are eligible for a +50 reputation bounty. Tobias KKS wants to to this question.

I'm creating an org chart using React and this library: https://github.com/bumbeishvili/org-chart . It uses D3 to create the org chart.

I want to use custom React components to style each node in the org chart, but when I try to set the node content to a React component, it returns {object Object} instead of actually rendering the component.

Please take a look at this Stackblitz for reproducing the error: https://stackblitz.com/edit/d3-org-chart-react-integration-hooks-oysugz?file=OrgChart.js

Here I try to set the node content to <TestOrgCard/> but as you can see, it does not render.

Does anyone have an idea how to render cards using custom React components?

Answer 1

You can't return a react component from the function you pass to .nodeContent() , it must be an HTML string. Since you want to render an existing react component you can use ReactDOMServer.renderToStaticMarkup to get the equivalent HTML string.

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} />
          );
        })