错误：目标容器不是 DOM 元素答案

【问题标题】：Error: Target container is not a DOM element错误：目标容器不是 DOM 元素
【发布时间】：2019-10-26 22:38:06
【问题描述】：

我一点一点地开始学习 React。面对一个愚蠢的问题，我不知道如何解决它。如何使我的代码工作？现在很清楚const About也是通过DOM添加的，tick()函数检测不到div。

关于.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const About = () => (
    <div>
        <div id="lol">
            <h1>AHJAHAHAHHAHAHAHAHAH</h1>
        </div>
        <div id="asd">
            asdasd
        </div>
    </div>
);

function tick() {
    const element = (
        <div>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    );
    ReactDOM.render(element, document.getElementById('lol'));
}

tick();
setInterval(tick, 1000);


export default About;

错误行：

ReactDOM.render(element, document.getElementById('lol'));

【问题讨论】：

元素“lol”必须在你的html文件中
第一次调用tick函数时是否已经将div添加到DOM中了？

标签： reactjs

【解决方案1】：

您尝试在 About 函数中定位 div #lol，但您使用 React 处理的唯一代码是 tick() 函数中的代码，其他所有内容都被忽略了。 React.render() 函数中的目标元素应该在 public/index.html 中。

index.html

 <html>
   <body>
     <div id="lol"></div>
   </body>
 <html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function tick() {
  const element = (
    <div>
        <h2>{new Date().toLocaleTimeString()}</h2>
    </div>
  );

  ReactDOM.render(element, document.getElementById('lol'));
}

tick();
setInterval(tick, 1000);

【讨论】：

这很清楚。但我正在尝试制作一个多页网站。并且通过单击 /about 相同的 div #lol 在根应该呈现。示例furyclans.playrust.ru，单击按钮会打开其他具有内部功能的选项卡。
React.render() 应该在你的主文件中使用一次 - 例如index.js，然后代码应该是您在每个页面上包含的单独组件。一步一步通读reactjs.org/docs/components-and-props.html，应该会更有意义:)
Оh，为什么使用 web sockets 的 php 比这一切都容易））谢谢，由于对这个框架的了解不足，我会进一步陷入沮丧））
啊哈哈，别担心你会没事的，我来自 PHP 背景，而且我对整个 JavaScript 框架世界还比较陌生——你会比你想象的更快地学会它。祝你好运！