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;

Ну я хочу взять

<h2> Hello World </h2>

вне JS-файла и поместите его в отдельный html и импортируйте html-файл для отображения функции, например

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

вы знаете, как это сделать?

9
reactjs

3 ответов

в 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 Демо этого в действии.

6

вы можете переместить часть 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 />
    )
}

 }
2

пожалуйста, заказ эта средняя ссылка

Это будет ваше объявление компонента React и необходимо импортировать шаблон.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 следующим образом (стили.модуль.css):

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