我可以打电话给“ createroot”或＆quot'reactdom.render＆quot＆quot＆quot在组件中？

发布于 2025-01-23 11:12:43 字数 910 浏览 3 评论 0原文

我想找到一个由外部库制作的圆顶元素（例如：react-calendar ..），并希望将我的组件附加为元素的孩子。因此，我用React.Createelement制作了React Node，并手动更新了React Dome，但我收到了以下消息。

react_devtools_backend.js：3973警告：ReactDom.render不再支持React 18中的REDERNENDER。改用Croteroot。直到您切换到新的API，您的应用将表现得好像正在运行的React 17

因此我使用了“ reactdom.createoroot（）”，而不是“ reactdom.render”，但还有另一个错误。

您在以前传递给reationdom.render（）的容器上调用reactdom.createOrot（）。这不支持。

当我插入时，组件已添加到DOM元素，但是我有这样的错误...我应该找到另一种方法吗？

这是我的代码

parentElement.current = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;

if (myElement.current) {
  const parentRoot = ReactDOM.createRoot(parentElement.current as HTMLDivElement);
  parentRoot.render(React.createElement("div", {className: "test-child"},
        <div>test child component</div>))
}
...

原文

I want to find a dome element made by an external library (ex: react-calendar..) and want to attach my component as child of the element. So, I made React node with React.createElement and updated the the react dome manually, but I got the following message.

react_devtools_backend.js:3973 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the
new API, your app will behave as if it's running React 17

So I used "ReactDOM.createRoot()" instead of "ReactDOM.render",but got another error.

You are calling ReactDOM.createRoot() on a container that was previously passed to ReactDOM.render(). This is not supported.

The component was added to the dom element as I inteded, but I got an error like that... should I find another method?

this is my code

parentElement.current = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;

if (myElement.current) {
  const parentRoot = ReactDOM.createRoot(parentElement.current as HTMLDivElement);
  parentRoot.render(React.createElement("div", {className: "test-child"},
        <div>test child component</div>))
}
...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北陌 2025-01-30 11:12:43

认为您正在使用错误。正如错误所说，您不能像所做的那样在.render（）函数中使用croteroot。

在下面尝试这样的事情：

    const parentElement = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;
        
    if (parentElement) {

const childElement = React.createElement("div", {className: "test-child"},
        <div>test child component</div>)
parentElement.current.appendChild(childElement);


const root = createRoot(parentElement);
root.render(<Component...>);
...

我无法真正测试任何内容，而无需看到您的完整代码，所以我只是从我的肠子上掉下来。如果您需要进一步的帮助，请参见下面的文档。
https：///reactjs.s.orgg/blog/20222/ 03/08/react-18-upgrade-guide.html

Think you're using it wrong. As the error says, you can't be using createRoot in the .render() function as you're doing.

Try something like this below:

    const parentElement = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;
        
    if (parentElement) {

const childElement = React.createElement("div", {className: "test-child"},
        <div>test child component</div>)
parentElement.current.appendChild(childElement);


const root = createRoot(parentElement);
root.render(<Component...>);
...

I can't really test anything without seeing your full code, so im just going off my gut. See docs below if you need further assistance.
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

回复收藏 0 原文

~没有更多了~