React插入节点对象

Question

如果在 React 功能组件中我创建一个DOM node像这样的

const divElement = document.createElement("div");

将其注入到组件正在渲染的内容中的最佳方法是什么？

例如

const MyComponent: React.FC<Props> = () => {
    const divElement = document.createElement("div");
    return (
        <div className="my-component">{divElement}</div>
    );
}

这个例子不行。它抛出一个错误说：

Objects are not valid as a React child

但它确实反映了我希望实现的解决方案类型，我可以以某种方式将元素直接渲染到内容中。

到目前为止，我发现让它工作的唯一方法是在我的组件的容器上使用 refdiv并appenchChild(divElement)调用ref. 但这对我来说不是一个理想的解决方案。

我还意识到有更简单的方法可以实现我的示例所做的事情。但这个问题源于我正在使用的第三方DOM node库，它返回 a并且我试图弄清楚如何注入它。

Answer 1

您想要使用 jsx 的语法，而不是使用普通 javascript 手动创建 div 元素：

const MyComponent: React.FC<Props> = () => {
const divElement = (
       <div></div>
      )
return (
    <div className="my-component">{divElement}</div>
  );
}

当然，如果您使用返回 dom 节点的第三方库，您React.createElement()也可以使用该语法，手动提取节点类型并将其注入.createElement()参数中。

 const divElement = React.createElement(
       el.nodeName.toLowerCase(),
       null,
       { dangerouslySetInnerHTML: { __html: el.innerHTML } 
});