D3 Org Chart with custom React components returning object Object-CodePudding

The

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?

CodePudding user response：

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