Вставьте React "root" dom, чтобы он был программно на странице - PullRequest
Новая
       11

Вставьте React "root" dom, чтобы он был программно на странице

0 голосов
/ 01 октября 2018

Допустим, в моем HTML-файле есть место: 

<div id="root"></div>

Чтобы отобразить элемент React в этот узел DOM, я передаю его в ReactDOM.render (): 

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Но что, если этот узел создан программно, после того, как, скажем, пользователь входит в систему, так что есть задержка при его рендеринге.Чтобы проиллюстрировать это, я пытаюсь сделать что-то вроде: 

<script type="text/javascript">
        setTimeout(function(){
            document.body.innerHTML += '<div id="root" data-user="1"></div>'
        }, 3000)
    </script>

Это не работает.ReactDOM ничего не находит на первом проходе, когда ищет document.getElementById('root'), и поэтому ничего не рендерит.Есть ли способ сделать это динамически?

1 Ответ

0 голосов
/ 01 октября 2018

Попробуйте это: 

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>
<body id="body">
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script type="text/babel">
		document.getElementById("body").innerHTML = `
		     <div id="app"></div>
		`; 

		const name = 'Josh Perez'; 
		const element = <h1>Hello, {name}</h1>; 
		ReactDOM.render( element, document.getElementById('app') );
	</script>
</body>
</html>
...