React renderComponent zastąpić DOM

kod

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 dołączy renderowane JSX do <div class="main">. Wyjście HTML będą:

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

Czy możliwe React.renderComponent zastąpić <div class="main">, więc czego się spodziewać tak:

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

Źródło

2014-07-15 user3741665

Jasne, wystarczy użyć:

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

Źródło

2014-07-17 06:34:03 AlexG

dzięki za odpowiedź. Nie myślałem tak wcześniej. Ale teraz mam kilka sytuacji i mam pytanie o aktualizację (spójrz na kod HTML). Czy możesz rozwiązać mój problem? – user3741665

Jestem prawie pewien, że React może renderować tylko najlepsze komponenty wewnątrz kontenerów, nie może zastąpić istniejących elementów. Oczywiście możesz po prostu usunąć stary element ręcznie przed renderowaniem komponentu React. – AlexG

Ale to nie jest możliwe, jeśli usuniesz stary element przed renderowaniem komponentu React, pojawi się błąd: "Docelowy kontener nie jest elementem DOM.". – p1nox

Czy problem pobieranie komponentu do renderowania w Reagowaniu 0.14.0. Moje rozwiązanie było upewnić się, że skrypty mają szczególny typ:

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

zawierać te trzy biblioteki:

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

Następnie użyj ReactDOM.render():

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

nie jestem nawet korzystając ES6 lub system budowy. Proste rozwiązanie, aby uzyskać tekst na ekranie z react.js

Źródło

2015-10-14 18:45:02

Miałem podobny problem i to właśnie wymyśliłem. Zastąp go prostym znacznikiem zakresu, aby nie wpływał na styl.

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

która będzie produkować

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

Źródło

2016-03-03 13:58:46

React renderComponent zastąpić DOM

Odpowiedz

Powiązane problemy