ReactJS 处理服务器端加载 DOM

Question

我正要尝试使用 reactjs 我是新手。 reactjs 是否能够将组件添加到现有 DOM.

所以我已经在服务器端创建了 DOM 并且在流程中 reactjs 应该添加一个组件，该组件应该在 body 内部呈现但保留已经存在的组件。

<script type="text/jsx">
var VisualEditor = React.createClass({
  render: function() {
    return (
       <div>Hello, world!</div>
    );
  }
})

var initVisualEditor = <VisualEditor params={true} />
React.render(initVisualEditor , document.body);

</script>

这个正在移除体内的所有东西并返回

<div>Hello, world!</div>

Answer 1

React 不会添加新的 div。 render 函数是组件将被渲染的地方，并替换那里已有的当前代码。我建议你在模板中创建一个带有 id 的 div，然后在 React.render.

中渲染它

模板：

<body><div id="app"></div></body>

反应：

React.render(
    <Component />,
    document.getElementById('app')
)

渲染到正文也是不好的做法。

ReactJS 处理服务器端加载 DOM

ReactJS dealing with server-side loaded DOM

dom

reactjs