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

Question

我有一种需要，但我似乎无法克服它。

因为我的页面同时使用模板渲染和反应...我有这个 div 有一个 id，让我们说 'foo'。

现在，我想获取“foo”的内容，然后用 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”的“新”组件内容，这将是一件容易的事情。如您所见，我采用了“数据”道具，并在我的组件中使用它再次将其吐出，但格式不同。等等......“foo” div 是由后端返回的，所以除了“尝试获取 innerHTML，操作它，并将组件渲染到该空间......”之外，我无法更改它。

任何帮助将不胜感激。

我收到元素已被修改的错误等等..并且似乎只是进入某种循环。

Answer 1

你可以按照以下方式做一些事情：

'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);

这将：

1. 将foo 的内容读入React 组件的状态。
2. 从页面中删除foo 元素。
3. 将新的 React 组件（内容为foo）渲染到页面中。