該
請查看此 Stackblitz 以重現錯誤：https ://stackblitz.com/edit/d3-org-chart-react-integration-hooks-oysugz?file=OrgChart.js
在這里，我嘗試將節點內容設定為，<TestOrgCard/>但如您所見，它不會呈現。
有沒有人知道如何使用自定義 React 組件渲染卡片？
uj5u.com熱心網友回復：
你不能從你傳遞給的函式中回傳一個 react 組件.nodeContent()，它必須是一個 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} />
);
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/343354.html
標籤：javascript 反应 d3.js 组织结构图
上一篇：d3svg陰影差異