reactjs - react 警告渲染()

Question

为什么会发生这种情况？警告:render():目标节点具有由 React 渲染的标记，但也存在不相关的节点。这最常见的原因是在服务器呈现的标记周围插入了空格。

<section id="container-wrapper">
    <div data-reactid=".0.1.0.1">
        loading.....
    </div>
</section>

//App.js

ReactDOM.render(<App routes={routes} /> , document.getElementById('container-wrapper'));

Answer 1

我在服务器端渲染标记时遇到了这个问题。如果你有这样的东西(ejs 示例):

<div id="app">
    <%- markup %>
</div>

尝试删除周围的所有空白。以下内容消除了我的案例中的警告。

<div id="app"><%- markup %></div>