Question

JSX代码：

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

HTML：

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

React.renderComponent会将呈现的JSX附加到<div class="main">。 HTML的输出将是：

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

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

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

Answer 1

在React 0.14.0中渲染我的组件时遇到问题。我的解决方案是确保您的脚本具有特殊类型：

<script type="text/babel" src='js/app.js'></script>

包括这三个库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

然后使用ReactDOM.render()：

ReactDOM.render(<Timer start={Date.now()} />, document.getElementById('app'));

我甚至没有使用ES6或构建系统。使用react.js

在屏幕上获取文本的简单解决方案

Answer 2

当然，只需使用：

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

Answer 3

有一个类似的问题，这就是我想出来的。用简单的span标签替换它，因此它不会影响您的样式。

const appContainer = document.createElement('span')
const mainEl = document.querySelector('.main')
mainEl.parentNode.replaceChild(appContainer, mainEl)
React.renderComponent(<App/>, mainEl)

哪会产生

<body>
  <header>welcome</header>
  <span> <!-- this acts as the container for react -->
    <div class="darken">hello world</div>
  </span>
</body>

React renderComponent替换DOM

3 个答案: