Доступ к элементам DOM реагирует на JS

Question

Я новичок в реакции JS.Я использую реагировать JS в сочетании с существующим приложением Rails.С помощью webpacker gem у меня есть все доступные зависимости.

По какой-то причине элементы DOM не могут реагировать на JS.В уроках то же самое работает отлично.В файле html.erb у меня есть

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

app / javascript / index.js file

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

Uncaught TypeError: Cannot read property 'dataset' of null

Кроме того, возможно ли это без использования ссылок или порталов, которые я могу иметьнад работой.

Answer 1

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.

Answer 2

Div с идентификатором root не может быть найден в DOM, потому что тег script находится перед div в документе. Вы можете переместить тег script после div, и он будет работать как положено.

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