访问DOM元素反应JS

Question

我是刚接触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。

Answer 1

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

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

Answer 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是否正确传递。