我有一个react组件，它有一个事件，当用户单击另一个组件中的一个项目时，该事件会被调用。被调用的函数用于在网页上显示一个Div。我可以返回一个html字符串来显示该div，但我更愿意将该HTML放到它自己的组件中。我的函数被调用，但是如果我尝试返回一个组件（而不是原始的html），它会显示div而不是文本。它只显示[object Object]。调用的函数如下所示：

function MyPage() {
   const nodeHoverTooltip = (node) => {
      return `<div>${node.name}</div>`;
      //displays fine
  };
  const nodeClickDetails = (node) => {
    if(node.nodeType === "somenode"){
        return (<MyNodeDetails></MyNodeDetails>);
        //this just displays [object, Object]
    }else if (node.nodeType === "anotherNodeType"){
        return `<div>Another Node Type Details</div>`;
        //displays fine
    }else{
        return `<div>More Details</div>`;
       //displays fine
    }    
  };

return (
    <div className="MyDiv">
      <header className="header">Some Examples</header>
      <section className="Main">
        <ForceGraph
          linksData={data.links}
          nodesData={data.nodes}
          nodeHoverTooltip={nodeHoverTooltip}
          nodeClickDetails = {nodeClickDetails}
        />
      </section>
    </div>
  );
}
export default MyPage;

我的节点详细信息.jsx组件：

function MyNodeDetails ({data}) {
    return (
     <div>
         MyNodeDetails 
     </div>
    )
  }  
  export default MyNodeDetails

有没有一种方法可以把HTML放到一个组件中，而不做原始的HTML？