React renderComponent remplace DOM

JSX code:

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 ajoutera rendu JSX pour <div class="main">. Sortie de HTML sera:

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

Est-il possible React.renderComponent remplacer <div class="main">donc ce que j'attends comme ceci:

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

source d'informationauteur user3741665

  1. 1

    A été d'avoir un problème pour faire mon composant de rendre à Réagir 0.14.0. Ma solution était de s'assurer vos scripts ont un type particulier:

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

    Inclure ces trois bibliothèques:

    <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>

    Ensuite utiliser ReactDOM.render():

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

    Je ne suis même pas en utilisant ES6 ou un système de construction. La solution la plus Simple pour obtenir le texte sur l'écran avec react.js

  2. 0

    Sûr, il suffit d'utiliser:

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

    A eu un problème similaire et c'est ce que je suis venu avec.
    La remplacer par une simple balise span sorte qu'il n'affecte pas votre style. 

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

    Qui va produire 

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