Question

我是React的新手。我对Angular2 +更熟悉。在Angular中，每个组件都有一个单独的html文件。但是，在React中，我看到render函数本身包含了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>，因此您无需担心组件状态。

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

为您的文字制作功能性（又名无状态或 dumb ）组件。您可以将其命名为HelloWorldText作为示例。
将此功能组件导入您的父组件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组件。

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

以下是 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模块导入模板，并将其维护在serapate文件中，如下所示（styles.module.css）：

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

Answer 4

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

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

4 个答案: