React renderComponent替换DOM

Question

React renderComponent替换DOM

JSX代码:

var App = React.createClass({
  render: function() {
    return <div className="darken">hello world</div>
  }
});
React.renderComponent(<App/>, document.querySelector('.main'))

Run Code Online (Sandbox Code Playgroud)

HTML:

<body>
  <header>welcome</header>
  <div class="main"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

React.renderComponent将附加渲染的JSX <div class="main">.HTML的输出将是:

<body>
  <header>welcome</header>
  <div class="main">
    <div class="darken">hello world</div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

是否可以React.renderComponent替换<div class="main">,所以我期望这样:

<body>
  <header>welcome</header>
  <div class="darken">hello world</div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ale*_*exG 0

当然，只需使用：

React.render(<App/>, document.body);

Run Code Online (Sandbox Code Playgroud)

请注意，在 React 0.12 版本中，“renderComponent”方法已重命名为“render”，因此上述答案可能不适用于较新版本的库。 (4认同)
我很确定 React 只能渲染容器内的顶级组件，它们不能替换现有元素。当然，您可以在渲染 React 组件之前手动删除旧元素。 (3认同)

归档时间：	11 年，3 月前
查看次数：	15582 次
最近记录：	9 年，6 月前