Reagire renderComponent sostituire DOM

codice

JSX:Reagire renderComponent sostituire DOM

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 si aggiunge le rese JSX a <div class="main">. Uscita di HTML sarà:

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

E 'possibile React.renderComponent sostituire <div class="main">, quindi quello che mi aspetto come questo:

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

fonte

2014-07-15 user3741665

Certo, basta usare:

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

fonte

2014-07-17 06:34:03 AlexG

Grazie per la risposta. Non ci avevo pensato prima. Ma ora ho alcune situazioni e ho una domanda di aggiornamento (guarda il codice HTML). Puoi risolvere il mio problema? – user3741665

Sono abbastanza sicuro che React può solo rendere i componenti principali all'interno dei container, non possono sostituire gli elementi esistenti. Ovviamente, è possibile rimuovere manualmente il vecchio elemento prima di eseguire il rendering del componente React. – AlexG

Ma questo non è possibile, se rimuovi il vecchio elemento prima di eseguire il rendering del componente React riceverai l'errore: "Il contenitore di destinazione non è un elemento DOM.". – p1nox

stava avendo un problema ottenere il mio componente per il rendering in React 0.14.0. La mia soluzione era assicurarsi che il proprio script hanno un tipo speciale:

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

includere questi tre biblioteche:

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

Quindi utilizzare ReactDOM.render():

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

non sto anche utilizzando ES6 o un sistema di costruzione. Soluzione semplice per ottenere il testo sullo schermo con react.js

fonte

2015-10-14 18:45:02

Aveva un problema simile e questo è quello che mi è venuto in mente. Sostituirlo con un semplice tag span in modo che non influenzi lo stile.

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

che produrrà

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

fonte

2016-03-03 13:58:46

Reagire renderComponent sostituire DOM

risposta

Problemi correlati