如何从React组件中的另一个文件呈现HTML？

Question

是否可以从React组件中的另一个文件呈现HTML？

我尝试了以下,但它不起作用:

var React = require('react');

/* Template html */
var template = require('./template');

module.exports = React.createClass({
    render: function() {
        return(
            <template/>
        );
    }
});

Answer 1

如果您的template.html文件只是HTML而不是React组件,那么您不能像使用JS文件那样需要它.

但是,如果您使用的是Browserify,则会有一个名为stringify的转换,它允许您将非js文件作为字符串.添加转换后,您将能够要求HTML文件,并且它们将像导出字符串一样导出.

一旦您需要HTML文件,就必须使用dangerouslySetInnerHTMLprop将HTML字符串注入到组件中.

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

这与React的很多内容相悖.将模板创建为使用JSX的React组件而不是常规HTML文件会更自然.

JSX语法使表达结构化数据(如HTML)非常容易,尤其是在使用无状态函数组件时.

如果您的template.html文件看起来像这样

<div class='foo'>
  <h1>Hello</h1>
  <p>Some paragraph text</p>
  <button>Click</button>
</div>

然后你可以将它转换为一个看起来像这样的JSX文件.

module.exports = function(props) {
  return (
    <div className='foo'>
      <h1>Hello</h1>
      <p>Some paragraph text</p>
      <button>Click</button>
    </div>
  );
};

然后你可以要求并使用它而不需要stringify.

var Template = require('./template');

module.exports = React.createClass({
  render: function() {
    var bar = 'baz';
    return(
      <Template foo={bar}/>
    );
  }
});

它维护原始文件的所有结构,但利用了React的props模型的灵活性,并允许编译时语法检查,这与常规HTML文件不同.

Answer 2

您可以使用angerouslySetInnerHTML 来执行此操作：

import React from 'react';
function iframe() {
    return {
        __html: '<iframe src="./Folder/File.html" width="540" height="450"></iframe>'
    }
}


export default function Exercises() {
    return (
        <div>
            <div dangerouslySetInnerHTML={iframe()} />
        </div>)
}

HTML 文件必须位于公用文件夹中

Answer 3

您可以使用该dangerouslySetInnerHTML属性注入任意HTML：

// Assume from another require()'ed module:
var html = '<h1>Hello, world!</h1>'

var MyComponent = React.createClass({
  render: function() {
    return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})
  }
})

ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>

您甚至可以将此模板行为组成组件（未经测试）：

class TemplateComponent extends React.Component {
  constructor(props) {
    super(props)
    this.html = require(props.template)
  }

  render() {
    return <div dangerouslySetInnerHTML={{__html: this.html}}/>
  }

}

TemplateComponent.propTypes = {
  template: React.PropTypes.string.isRequired
}

// use like
<TemplateComponent template='./template.html'/>

这样，template.html（在同一目录中）看起来像（再次未经测试）：

// ./template.html
module.exports = '<h1>Hello, world!</h1>'

Answer 4

仅从 props 渲染的组件是很常见的。像这样：

class Template extends React.Component{
  render (){
    return <div>this.props.something</div>
  }
}

然后，在具有逻辑的上层组件中，只需导入模板组件并传递所需的道具。所有逻辑都保留在更高级别的组件中，并且模板仅进行渲染。这是实现像 Angular 中那样的“模板”的可能方法。

无法仅包含 jsx 的 .jsx 文件并在 React 中使用它，因为 jsx 并不是真正的 html，而是 React 管理的虚拟 DOM 的标记。