React renderComponent заменить DOM

Код 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>

Ответ 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 или систему сборки. Простое решение для вывода текста на экран с помощью response.js

Ответ 2

Конечно, просто используйте:

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

Ответ 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>