如何将React组件插入react-treeviz的renderNode返回的HTML模板中

API 探路者

2026-10-3

问题原因

react-treeviz 组件的renderNode属性要求返回HTML字符串，底层会直接将返回值作为innerHTML插入DOM，不走React的组件渲染流程。你直接在模板字符串中插入React组件<Icon/>时，本质是将组件对象拼入字符串，对象调用默认toString方法的结果就是[object Object]，因此出现异常显示。

解决方案

使用React官方提供的ReactDOMServer.renderToString方法，将Material UI图标组件先渲染为静态HTML字符串，再拼入模板即可正常显示。

具体实现步骤

首先导入ReactDOMServer：

import ReactDOMServer from 'react-dom/server';

修改renderNode中的模板拼接逻辑，将组件转为字符串后插入：

renderNode={(data) => {
  const nodeData = data.data;
  const settings = data.settings;
  let result = "";
  if (data.depth !== 2) {
    result = `<div class="box" style='cursor:pointer;height:${settings.nodeHeight}px; width:${settings.nodeWidth}px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${nodeData.color};border-radius:5px;'>
    <div><strong>
        ${nodeData.text_1}
    </strong>
    ${ReactDOMServer.renderToString(<Icon/>)}
    </div><div>is</div><div><i>
    ${nodeData.text_2}
    </i></div></div>`;
  } else {
    result = `<div class="box" style='cursor:pointer;height:${
      settings.nodeHeight
    }px; width:${
      settings.nodeHeight
    }px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${
      nodeData.color
    };border-radius:${settings.nodeHeight / 2}px;'><div><strong>
    ${nodeData.text_1}
    </strong></div></div>`;
  }
  return result;
}}