如果在 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)它。
最佳答案
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}>
);
关于javascript - react 插入节点对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58418878/