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

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>您不需要担心组件状态.

因此,您可以执行以下操作:

1. 为您的文本创建一个功能(也称为无状态或哑)组件.您可以将其命名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演示.

遗憾的是,在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 />
    )
}

 }