ReactJS：Javascript 不是针对反应中的 div 元素，而是针对 html 中的 div 元素

Question

我在 index.html 的正文部分有一块 javascript，它修改了 id='aww-wrapper' 的 div 元素。

如果我像这样在脚本上方的 index.html 文件的正文中创建一个 div 元素，那么一旦加载了网页，脚本就会按预期修改 div 元素。

<div style="width: 600px; height: 400px;" id="aww-wrapper"></div>
  
<div id="root"></div>

<script type="text/javascript">
  var aww = new AwwBoard('#aww-wrapper', {
  });
</script>

我需要使用 react 做同样的事情，但是，如果我在 App.js 文件而不是 html 文件中创建具有相同 ID 的 react div 元素，则脚本不再修改/作用于 react div 元素。

import './App.css';

function App() {

  return (
    <div className="App">
      <div style={{width:'600px', height:'400px'}} id="aww-wrapper">
      </div>
    </div>
  );
}

export default App;

该代码旨在使用以下 awwapp.com 代码创建一个白板应用程序。 我不知道反应实现有什么问题，脚本标签是在反应 div 制作之前先运行的吗？

如果您想自己尝试，请将其放在 index.html 的头部并使用上面的 html 代码创建白板。

<head>
    <script src="https://awwapp.com/static/widget/js/aww3.min.js"></script>
</head>

Answer 1

你不能将 React 与这样的外部脚本混合使用，因为 React 会处理渲染。 aww 脚本找不到该元素，因为 React 尚未渲染它。 所以它需要在渲染之后运行。 但是，如果你碰巧得到了这个元素，React 可能会在一些 state 更改时重新渲染它，这将导致你的白板再次消失。 除非他们提供我似乎找不到的 npm package，否则您无法按照您尝试的方式加载它。

ReactJS：Javascript 不是针对反应中的 div 元素，而是针对 html 中的 div 元素

问题描述

1 个解决方案

解决方案1
0 2020-08-20 05:09:46

ReactJS：Javascript 不是针对反应中的 div 元素，而是针对 html 中的 div 元素

问题描述

1 个解决方案

解决方案1 0 2020-08-20 05:09:46

解决方案1
0 2020-08-20 05:09:46