React: Повторно визуализировать элемент в componentDidMount сразу. Ошибка: невозможно прочитать свойство «rootID» со значением null.

Созданный на 10 мая 2016 · 3Комментарии · Источник: facebook/react

Я делаю элемент ReactDOM.render #container (верхний уровень) в функции componentDidMount, React показывает мне какую-то ошибку, не удается прочитать свойство 'rootID' из null .
Если я использую setTimeout для запуска ReactDOM.render, это работает. (Даже после 0 мс)
Я чувствую себя неуверенно, может ли кто-нибудь помочь мне?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>React</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="script/lib/react.js"></script>
    <script type="text/javascript" src="script/lib/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>

A.jsx и B.jsx:

var A = React.createClass({
    componentDidMount: function(){
        ReactDOM.render(
            <B />,
            document.getElementById('container')
        );
    },
    render: function(){
        return (
            <div>Hello World, I'm A.</div>
        )
    }
});

var B = React.createClass({
    render: function(){
        return (
            <div>Hello World, I'm B.</div>
        )
    }
});

приложение.jsx:

ReactDOM.render(
    <A />,
    document.getElementById('container')
);

Источник

h1orz

Самый полезный комментарий

Настоящий вопрос заключается в том, почему вы вызываете ReactDOM.render из метода жизненного цикла? Вы пытаетесь смонтировать новый компонент на узле, на котором смонтирован текущий компонент, что выглядит как анти-шаблон.

Вы должны использовать корневой родительский компонент для управления визуализацией компонента, вместо того, чтобы пытаться повторно монтировать в корне. Если вам абсолютно необходимо иметь несколько корней React (для чего у вас должна быть действительно веская причина), вы должны использовать какую-то вспомогательную систему для управления этим:

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

Если у вас есть несколько корней React или один корень, который со временем удаляется, мы рекомендуем вам всегда создавать собственный API-оболочку. Все они будут выглядеть немного по-разному в зависимости от того, как выглядит ваша внешняя система. Например, в Facebook у нас есть система, которая автоматически подключается к нашему маршрутизатору перехода страницы для автоматического вызова unmountComponentAtNode.

Вместо того, чтобы вызывать ReactDOM.render() напрямую везде, рассмотрите возможность написания/использования библиотеки, которая будет управлять монтированием и размонтированием в вашем приложении.

aweary 1 июн. 2016

👍2 🎉1

Все 3 Комментарий

Можете ли вы воспроизвести свою проблему в jsfiddle? https://jsfiddle.net/L3zn8dws/

cpb 1 июн. 2016

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

Если у вас есть несколько корней React или один корень, который со временем удаляется, мы рекомендуем вам всегда создавать собственный API-оболочку. Все они будут выглядеть немного по-разному в зависимости от того, как выглядит ваша внешняя система. Например, в Facebook у нас есть система, которая автоматически подключается к нашему маршрутизатору перехода страницы для автоматического вызова unmountComponentAtNode.

aweary 1 июн. 2016

👍2 🎉1

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

Если вы хотите, чтобы B отображалось, включите <B /> из вывода рендеринга A .