我怎么能想象 HTML 从组件中的另一个文件 React?

如果是你的文件

template.html

-这很简单 HTML, 而不是一个组成部分 React, 然后你不能像你一样要求它 JS.

但是，如果你使用 Browserify — 有一个叫做转换
https://github.com/JohnPostlethwait/stringify
, 这将允许您将不是JS文件作为行。 添加转换后，您可以要求 HTML 文件，它们将被导出好像只是行。

只要您需要一个文件 HTML, 您需要输入一个字符串 HTML 在您的组件中使用
https://reactjs.org/docs/dom-e ... rhtml
.

var __html = require/'./template.html'/;

var template = { __html: __html };



React.module.exports = React.createClass/{

 render: function// {

 return/

 <div dangerouslysetinnerhtml="{template}"></div>

 /;

 }

}/;

但是，它违背了很多会发生的事情 React. 创建模板作为组件将更加自然 React 从 JSX, 不是普通文件 HTML.

句法 JSX 允许微不足道地快速表达结构化数据，例如 HTML, 特别是在使用时
https://facebook.github.io/rea ... nents
没有国家拯救 .

如果是你的文件

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 并允许您在编译期间检查语法，与通常的文件相比 HTML.
</template>

财产
https://facebook.github.io/rea ... .html
可用于介绍任意 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="[url=https://fb.me/react-0.14.3.min.js"></script>]https://fb.me/react-0.14.3.min ... gt%3B[/url]

<script src="[url=https://fb.me/react-dom-0.14.3.min.js"></script>]https://fb.me/react-dom-0.14.3 ... gt%3B[/url]

<div id="app"></div>

您甚至可以成为这种行为模式的组成方法 /un/:

class TemplateComponent extends React.Component {

 constructor/props/ {

 super/props/

 this.html = require/props.template/

 }



 render// {

 return <div dangerouslysetinnerhtml="{{__html:" this.html}}=""></div>

 }



}



TemplateComponent.propTypes = {

 template: React.PropTypes.string.isRequired

}



// use like

<templatecomponent template="./template.html"></templatecomponent>

并且其中

template.html

/在同一目录中/ 它看起来像那样 /再次，未经证实/:

// ./template.html

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

通常有些组件只能从细节中呈现。 类似于这个：

class Template extends React.Component{

 render //{

 return <div>this.props.something</div>

 }

}

然后在您拥有逻辑的顶级组件中，您只需导入模板组件并传输必要的详细信息。 您的所有逻辑都仍处于更高级别的组件，并且模板仅可视化。 这是实现的可能方法。 'templates', 怎么样 Angular.

没有办法有一个文件 .jsx 只有 jsx 并使用它 React, 因为 jsx 实际上，它不是 html, 和 markup 对于虚拟 DOM, 谁的经理 React.

如果模板是组件，您可以执行此操作 react.

Template.js

var React = require/'react'/;



var Template = React.createClass/{

 render: function//{

 return /<div>Mi HTML</div>/;

 }

}/;



module.exports = Template;

MainComponent.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:

//[url=https://github.com/zilverline/react-tap-event-plugin]https://github.com/zilverline/ ... lugin[/url]

injectTapEventPlugin//;



var MainComponent = React.createClass/{

 render: function// {

 return/

 <template></template>

 /;

 }

}/;



// Render the main app react component into the app div.

// For more details see: [url=https://facebook.github.io/react/docs/top-level-api.html#react.render]https://facebook.github.io/rea ... ender[/url]

ReactDOM.render/

 <maincomponent></maincomponent>,

 document.getElementById/'app'/

 /;

如果使用Material-UI，则用户界面组件的组件的兼容性，则没有正常输入。

为此，您可以使用 dangerouslySetInnerHTML:

import React from 'react';

function iframe// {

 return {

 __html: '<iframe height="450" src="./Folder/File.html" width="540"></iframe>'

 }

}





export default function Exercises// {

 return /

 <div>

<div dangerouslysetinnerhtml="{iframe//}"></div>

</div>/

}

HTML 文件必须在

一般的

文件夹