陣營renderComponent更換DOM

JSX代碼：陣營renderComponent更換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將追加呈現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>

來源

2014-07-15 user3741665

當然，只需使用：

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

來源

2014-07-17 06:34:03 AlexG

感謝您的答覆。我以前沒有這樣想過。但現在我有一些情況，我有更新的問題（看看HTML代碼）..你能解決我的問題嗎？ – user3741665

我很確定React只能渲染容器中的頂層組件，它們不能替換現有的元素。當然，您可以在渲染React組件之前手動刪除舊元素。 – AlexG

但是這是不可能的，如果你在渲染React組件之前刪除舊元素，你會得到這樣的錯誤：「目標容器不是DOM元素」。 – p1nox

是有一個問題讓我的組件在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

來源

2015-10-14 18:45:02

有一個類似的問題，這就是我想出的。將其替換爲簡單的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>

來源

2016-03-03 13:58:46

陣營renderComponent更換DOM

回答

相關問題