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，操纵它并将组件放入该空间......”之外，我无法改变它。

任何帮助，将不胜感激。

我得到的错误，该元素已被修改，等..似乎只是在某种循环。

如果您有权访问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）渲染到页面中。

有没有更简单的方法来分配一个对象的innerHtml与状态道具？ – SuperUberDuper

@SuperUberDuper不是真的。理想情况下，React应用程序绝对不应该手动修改DOM - 所有事情都应该通过'props'和'state'来完成。 –

好的谢谢!!!!!! – SuperUberDuper

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

相关推荐