访问 DOM 元素反应 JS答案

【问题标题】：Accessing DOM elements react JS访问 DOM 元素反应 JS
【发布时间】：2019-04-19 13:36:26
【问题描述】：

我是反应 JS 的新手。我将 React JS 与现有的 Rails 应用程序结合使用。在 webpacker gem 的帮助下，我拥有了所有可用的依赖项。

由于某种原因，DOM 元素不能用于响应 JS。在教程中，同样的事情可以正常工作。在 html.erb 文件中我有

<div id='root' data-link='https://x.com'></div>

app/javascript/index.js 文件

const root = document.querySelector('#root')
ReactDOM.render(<Dashboard link={root.dataset.link} />, root)

Uncaught TypeError: Cannot read property 'dataset' of null

另外，是否可以不使用我可以在上面工作的 Refs 或 Portal。

【问题讨论】：

您的文档结构如何？如果您打开开发者工具并检查 Elements，是否有一个 id 为 root 的 div 应该在哪里？
是的，它就在那里，即使我在浏览器控制台上运行const root = document.querySelector('#root') 代码，我看到 dom 对象出现了.. 但由于某种原因 react JS 找不到它
你的脚本是否加载到了body标签的底部？可能是您在 id 为 root 的 div 之前加载脚本。
这就是原因。我在 div 之前加载脚本。谢谢解决了

标签： javascript html ruby-on-rails reactjs webpack

【解决方案1】：

id 为root 的 div 在 DOM 中找不到，因为 script 标签在文档中的 div 之前。您可以将脚本标签移动到 div 之后，它会按预期工作。

<div id='root' data-link='https://x.com'></div>
<script src="/bundle.js"></script>

【讨论】：

【解决方案2】：

function Dashboard(props) {
    return <h1>Hello, {props.link}</h1>;
}

const root = document.querySelector('#root')
ReactDOM.render(<Dashboard link={root.dataset.link} />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root' data-link='https://x.com'></div>

完全可行，猜你可能需要设置一些断点并检查是否正确传递了root。

【讨论】：