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

Question

我是 React 新手。我对Angular2+更熟悉。在 Angular 中，每个组件都有一个单独的 html 文件。但是，在 React 中，我看到渲染函数本身包含 html 模板。例如，

import React, { Component } from 'react';

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

export default HelloWorld;

嗯，我想拍

<h2> Hello World </h2>

在js文件之外，放在一个单独的html中，导入html文件来渲染函数，例如

 render() {
            return (
                import content of helloworld.html
            );
        }

你知道怎么做吗？

Answer 1

---

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

---

由于您的子组件在这里只是静态标记即 <h2>Hello World</h2>，因此您无需担心组件状态。

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

1. 为您的文本制作一个功能性（又名无状态或dumb）组件。您可以将其命名为 HelloWorldText 作为示例。

2. 将此功能性组件导入您的父组件HelloWorld。

---

您的功能组件看起来像这样：

HelloWorldText.js

const HelloWorldText = () => ( <h2> Hello World </h2> );

export default HelloWorldText;

---

然后你将这个功能组件HelloWorldText导入你的父组件HelloWorld，如下所示：

HelloWorld.js

import React, { Component } from 'react';
import HelloWorldText from './path/to/HelloWorldText';

class HelloWorld extends Component {
  render() {
    return (
      <HelloWorldText />
    );
  }
}

export default HelloWorld;

---

这是一个带有此代码的 CodePen Demo。

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

---

---

注意：在 React 中，您希望您的组件尽可能通用。您最终可能会创建一个 Text 组件而不是 HelloWorldText 组件。

然后您将使用props 将文本动态传递到Text 组件。

这里是 CodePen Demo 的实际操作。

Answer 2

您可以将 JSX 部分移动到一个单独的文件中，然后将该文件导入您的组件类中

这是一个例子

Signin.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>
)
}

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 />
    )
}

 }

Answer 3

请查看this Medium link

这将是你的 React 组件声明和 您需要在此处导入 template.js 文件并在组件 'Abc' (index.jsx) 的上下文中呈现它：

import template from './template';

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

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

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;

另外，我们可以在模板中导入 CSS 模块，并在单独的文件中维护它们，如下（styles.module.css）：

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

Answer 4

目前，无法从 html 文件加载模板。