Reactjs：如何将html模板放在单独的文件中？

我是新来的。我更熟悉Angular2+。在Angular中，每个组件都有一个单独的html文件。然而，在React中，我看到呈现函数本身包含html模板。比如说,

import React, { Component } from 'react';

class HelloWorld extends Component {
    render() {
        return (
            <h2> Hello World </h2>
        );
    }
}

export default HelloWorld;

你知道怎么做吗？

---

在React中，您通常会创建一个子组件并将其导入父组件

---

因为这里的子组件只是静态标记，即

helloworld

，所以不需要担心组件状态

因此，您可以执行以下操作：

为您的文本制作一个功能性组件（也称为无状态或哑）。您可以将其命名为

HelloWorldText

，作为示例

将此功能组件导入父组件

HelloWorld

---

您的功能组件将如下所示：

HelloWorldText.js

import React, { Component } from 'react';
import {SigninJsx} from './Signin.jsx';

export class Signin extends Component {
constructor(props){
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
        email:'',
        password:''
    };
    this.signIn = this.signIn.bind(this)
}

handleEmailChange(e){
    this.setState({email:e.target.value})
    console.log("Error Change");
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);            
}

render() {
    return (
        <SigninJsx />
    )
}

 }

const HelloWorldText=（）=>（Hello World）；
导出默认HelloWorldText；

---

然后将此功能组件

HelloWorldText

导入父组件

HelloWorld

，如下所示：

HelloWorld.js

import React, { Component } from 'react';
import {SigninJsx} from './Signin.jsx';

export class Signin extends Component {
constructor(props){
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
        email:'',
        password:''
    };
    this.signIn = this.signIn.bind(this)
}

handleEmailChange(e){
    this.setState({email:e.target.value})
    console.log("Error Change");
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);            
}

render() {
    return (
        <SigninJsx />
    )
}

 }

import React，{Component}来自'React'；
将HelloWorldText从“/path/导入到/HelloWorldText”；
类HelloWorld扩展组件{
render（）{
返回(
);
}
}
导出默认HelloWorld；

---

下面是一个带有此代码的

不幸的是，在CodePen上，您无法导出和导入组件，但希望它仍能让您了解如何在父组件中使用子组件

---

---

注意：在React中，您希望组件尽可能通用。您可能最终会生成一个

Text

组件，而不是

HelloWorldText

组件

然后，您可以使用

道具将文本动态地传递到
text
组件中

这是一个正在运行的。
您可以将JSX部件移动到一个单独的文件中，并将该文件导入到组件类中

这里有一个例子

签名jsx

 import React from 'react';

 export const SigninJsx = () => {
 return (
 <div className="container">
        <form className="form-signin">
            <h2 className="form-signin-heading"> Please sign in </h2>
            <br />
            <label htmlFor="inputEmail" className="sr-only"> Email address
            </label>
            <input type="email" id="inputEmail" onChange={this.handleEmailChange} className="form-control" placeholder="Email address" required autoFocus />
            <br />
            <label htmlFor="inputPassword" className="sr-only"> Password</label>
            <input type="password" id="inputPassword" onChange={this.handlePasswordChange} className="form-control" placeholder="Password" required />
            <br />
            <button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button"> Sign in
            </button>
        </form>
    </div>
)
}

从“React”导入React；
导出常量符号jsx=（）=>{
返回(
请登录


电子邮件地址


密码


登录
)
}

Signin.js

import React, { Component } from 'react';
import {SigninJsx} from './Signin.jsx';

export class Signin extends Component {
constructor(props){
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
        email:'',
        password:''
    };
    this.signIn = this.signIn.bind(this)
}

handleEmailChange(e){
    this.setState({email:e.target.value})
    console.log("Error Change");
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);            
}

render() {
    return (
        <SigninJsx />
    )
}

 }

import React，{Component}来自'React'；
从“./Signin.jsx”导入{SigninJsx}；
导出类签名扩展组件{
建造师（道具）{
超级（道具）；
this.handleEmailChange=this.handleEmailChange.bind（this）；
this.handlePasswordChange=this.handlePasswordChange.bind（this）；
此.state={
电子邮件：“”，
密码：“”
};
this.signIn=this.signIn.bind（this）
}
handleEmailChange（电子邮件）{
this.setState（{email:e.target.value}）
控制台日志（“错误更改”）；
}
handlePasswordChange（e）{
this.setState（{密码：e.target.value}）
}
签名（）{
警报（'电子邮件地址为'+this.state.Email+'密码为'+this.state.Password'）；
}
render（）{
返回(
)
}
}
请结帐

这将是您的React组件声明和
您需要在此处导入template.js文件，并在组件“Abc”（index.jsx）的上下文中呈现它：

单独的js文件将具有如下模板（template.js）：

目前，无法从html文件加载模板。
通过保持组件的小型和轻量级，并将逻辑提取到智能组件中，应该不需要这样做。这是react开发人员有意的选择。你想这样做有什么特别的原因吗？或者仅仅是因为习惯？相关：是的，答案解释得很好，但是仍然有没有办法导入HTML文件而不是直接在render方法中编写代码？我认为要做到这一点，你必须使用React的道具。这说明了如何执行此操作。*很遗憾，在CodePen上，您无法导出和导入组件”。。但是，使用Codesandbox，您可以：谢谢。当我尝试从模板（sign.jsx）引用[This.state.email]时，我收到一个错误，指出[This]未定义。如果我尝试引用[state.email]，也会发生类似的情况.你知道为什么吗？如果你用这个，你可以用这个来代替看这个
import template from './template';

export default class Abc extends React.Component {
  render() {
    return template.call(this)
  }
}

import styles from './styles.module.css';

const template = () => (
<div className={styles.outerContainer}>
  <div className={styles.middleContainer}>
        <div className={styles.innerContainer}>Hello, World</div>
    </div>
</div>
);
export default template;

.outerContainer {
  backgroundColor: red;
} 
/* etc... etc... */