如何在 React 组件中从另一个文件渲染 HTML？

是否可以在 React 组件中从另一个文件渲染 HTML？

我已经尝试过以下方法，但它不起作用：

var React = require('react');

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

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

If your template.htmlfile 只是 HTML 而不是 React 组件，那么你就不能像处理 JS 文件那样需要它。

但是，如果您使用 Browserify — 有一个称为字符串化这将允许您将非 js 文件作为字符串。添加转换后，您将能够需要 HTML 文件，并且它们将像字符串一样导出。

一旦您需要 HTML 文件，您就必须使用以下方法将 HTML 字符串注入到您的组件中：dangerouslySetInnerHTML prop.

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）变得非常容易，尤其是当您使用无状态函数组件.

If your 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>
  );
};

然后你就可以 require 并使用它，而不需要 stringify。

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

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

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