Question

我有需要而且似乎无法克服它。

因为我的页面同时使用模板渲染和反应...我有一个有id的div，让我们说'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'的'new'组件内容呈现其中的组件将是一件容易的事情。正如你所看到的，我采用了“数据”的支柱，我在我的组件中使用它来再次吐出它，但是采用不同的格式。等......“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);

这将：

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

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

1 个答案: