javascript - react 插入节点对象

Question

如果在 React 功能组件中，我创建一个 DOM 节点，如下所示

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

将其注入(inject)到组件正在呈现的内容中的最佳方式是什么？

例如

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

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

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

我还意识到有更简单的方法可以实现我的示例所做的事情。但这个问题源于我正在使用的 thirdParty 库，它返回一个 DOM 节点，我正试图弄清楚如何注入(inject)它。

Answer 1

https://codesandbox.io/s/clever-bassi-0kq6y

这将创建一个具有相同根类型的新组件并设置所有内部 html

import React from "react";
import ReactDOM from "react-dom";

const el = document.createElement("div");
el.innerHTML = `<span style="color:red;">hello</span>`;

function App() {
  const MyComponent = () => {
    const MyElement = React.createElement(
      el.nodeName.toLowerCase(),
      { dangerouslySetInnerHTML: { __html: el.innerHTML } },
      null
    );
    return MyElement;
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyComponent />
    </div>
  );
}

然后可以将其抽象成它自己的组件

  const DynamicComponent = ({ element }) => {
    const reactElement = React.createElement(
      element.nodeName.toLowerCase(),
      { dangerouslySetInnerHTML: { __html: element.innerHTML } },
      null
    );
    return reactElement;
  };

并用作

const el = document.createElement("div");
el.innerHTML = `<span style="color:red;">hello</span>`;
return (
  <DynamicComponent element={el}>
);