javascript - 如何在 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 文件，您必须使用 dangerouslySetInnerHTML prop 将 HTML 字符串注入(inject)到您的组件中。 .

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)变得非常容易，尤其是当您使用 stateless function components 时。 .

如果您的 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 模型的灵 active ，并允许进行编译时语法检查，这与常规 HTML 文件不同。