Reactjs: comment mettre le modèle html dans un fichier séparé?

Question

Je suis nouveau chez React. Je connais beaucoup plus Angular2 +. Dans Angular, chaque composant a un fichier html distinct. Cependant, dans React, je vois que la fonction de rendu elle-même inclut le modèle html. Par exemple,

 import React, { Component } from 'react';

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

export default HelloWorld;
 

Eh bien, je veux prendre

 <h2> Hello World </h2>
 

en dehors du fichier js et le mettre dans un html séparé et importer le fichier html pour rendre la fonction, par exemple

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

Savez-vous comment faire?

Answer 1

Answer 2

Vous pouvez déplacer la pièce JSX dans un fichier séparé et importer ce fichier dans votre classe de composants

Voici un exemple

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

Veuillez checkout ce Support lien

Ce sera votre Réagissent composant de déclaration et de vous devez importer les template.js fichier à l'intérieur d'ici et de le rendre dans le cadre de la composante " Abc " (l'index.jsx):

import template from './template';

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

Séparer fichier js aura modèle comme suit (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;

En outre, on peut importer des modules CSS à l'intérieur du modèle et de les maintenir en serapate fichier comme suit (les styles.le module.css):

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