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

访问DOM元素会影响JS

2 个答案: