是否可以从 React 组件中的另一个文件渲染 HTML？
我尝试了以下方法，但不起作用：
var React = require('react');
/* Template html */
var template = require('./template');
module.exports = React.createClass({
render: function() {
return(
<template/>
);
}
});
如果您的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>
);
};
然后你可以要求和使用它而无需字符串化。
var Template = require('./template');
module.exports = React.createClass({
render: function() {
var bar = 'baz';
return(
<Template foo={bar}/>
);
}
});
它保留了原始文件的所有结构，但利用 React 的 props 模型的灵活性并允许编译时语法检查，这与常规 HTML 文件不同。
您可以使用该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>'
您可以使用危险的SetInnerHTML 来做到这一点：
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 文件必须在public文件夹中
拥有仅从 props 渲染的组件是很常见的。像这样：
class Template extends React.Component{
render (){
return <div>this.props.something</div>
}
}
然后在您拥有逻辑的上层组件中，您只需导入模板组件并传递所需的props。您的所有逻辑都保留在更高级别的组件中，并且模板仅呈现。这是在 Angular 中实现“模板”的一种可能方法。
没有办法让 .jsx 文件只包含 jsx 并在 React 中使用它，因为 jsx 不是真正的 html，而是 React 管理的虚拟 DOM 的标记。
如果模板是一个react组件，你可以这样做。
模板.js
var React = require('react');
var Template = React.createClass({
render: function(){
return (<div>Mi HTML</div>);
}
});
module.exports = Template;
主组件.js
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require("react-tap-event-plugin");
var Template = require('./Template');
//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
var MainComponent = React.createClass({
render: function() {
return(
<Template/>
);
}
});
// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
<MainComponent />,
document.getElementById('app')
);
如果您使用的是 Material-UI，为了兼容性，请使用 Material-UI 组件，没有正常输入。