REACT.js和渲染，但使用元素渲染的innerHTML到？

我有需要，我似乎無法克服它。REACT.js和渲染，但使用元素渲染的innerHTML到？

因爲我的頁面同時使用模板呈現和反應...我有這個div有一個ID，可以說'富'。

現在，我想採取「富」的內容，然後渲染我的組件與foo的內容。我的React組件需要有一定的外觀，但頁面模板有另外一個....是否有意義？

即。

頁面呈現的東西，如：

<div id="foo"> 
    <ul> 
    <li>Item One</li> 
    <li>Item two</li> 
    </ul> 
</div>

然後在我的JSX文件，我有：

var fooElem = document.getElementById('foo'); 
var contents = fooElem && fooElem.innerHTML || ''; 

if(fooElem) { 
    React.render(
     <MyCOMPONENT data={contents} />, 
     fooElem 
    ); 
}

我想，這會是一件容易的事情，只是讓DIV的innerHTML和然後使用圍繞我抓取的'innerhtml'的'new'組件內容在其中渲染一個組件。正如你所看到的，我採用了一些「數據」，然後在組件中使用它來再次吐出，但採用不同的格式。等等......「foo」div由後端傳回，所以除了「嘗試獲取innerHTML，操縱它並將組件放入該空間......」之外，我無法改變它。

任何幫助，將不勝感激。

我得到的錯誤，該元素已被修改，等..似乎只是在某種循環。

來源

2015-07-28 user1492442

如果您有權訪問HTML和innerHTML，爲什麼不直接在React中重新編碼它？你所要做的似乎是一個非常糟糕的反模式。 –

爲什麼它會成爲反模式？這看起來像React應該能夠處理的正常操作。我有權訪問它，但我無法訪問決定內容的內容。 – user1492442

對不起 - 我以爲你的意思是說你有完全的權限來實際創建'foo'裏面的內容。當你渲染React組件時，你想要它與'foo'並排嗎，還是應該替換'foo'？ –

你可以做一些線沿線的：

'use strict'; 
var React = require('react'); 

var myComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     content: '' 
    }; 
    }, 
    // Learn more about React lifecycle methods: https://facebook.github.io/react/docs/component-specs.html 
    componentWillMount: function() { 
    // Get the content of foo 
    var content = document.getElementById('foo').innerHTML; 

    // Remove the old templated foo from the page 
    // This assumes foo is a direct child of document.body 
    document.body.removeChild(document.getElementById('foo')); 

    this.setState({ 
     content: content 
    }); 
    }, 
    render: function() { 
    <div id={'foo'}> 
     {this.state.content} 
    </div> 
    } 
}); 

// This assumes you want to render your component directly into document.body 
React.render(myComponent, document.body);

這將：

閱讀的foo內容到陣營組件的狀態。
從頁面中刪除foo元素。
將新的React組件（內容爲foo）渲染到頁面中。

來源

2015-07-28 18:58:07

有沒有更簡單的方法來分配一個對象的innerHtml與狀態道具？ – SuperUberDuper

@SuperUberDuper不是真的。理想情況下，React應用程序絕對不應該手動修改DOM - 所有事情都應該通過'props'和'state'來完成。 –

好的謝謝!!!!!! – SuperUberDuper

REACT.js和渲染，但使用元素渲染的innerHTML到？

回答

相關問題