Reactjs: HTML 템플릿을 다른 파일에 넣는 방법

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 파일을 렌더 함수로 Import합니다.

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

어떻게 하는지 아세요?

---

반응에서는 일반적으로 하위 구성 요소를 만들어 상위 구성 요소로 가져옵니다.

---

여기서의 자녀 컴포넌트는 정적 마크업일 뿐이기 때문에 <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에서는 컴포넌트를 내보내고 Import할 수 없지만 상위 컴포넌트 내에서 하위 컴포넌트를 사용하는 방법을 알 수 있기를 바랍니다.

---

---

주의: 리액트에서는 컴포넌트를 가능한 한 일반적인 것으로 합니다.당신은 아마 결국에 한 가지 일을 하게 될 것이다.Text대신 컴포넌트HelloWorldText요소.

그런 다음 텍스트를 동적으로 전달하여Text컴포넌트 사용props.

이 동작의 CodePen 데모를 소개합니다.

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

 }

이 매체 링크를 확인하십시오.

이것은 React 컴포넌트 선언입니다.여기서 template.js 파일을 Import하여 컴포넌트 '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 모듈을 Import하여 다음과 같이 serapate 파일로 유지할 수도 있습니다(styles.module.css).

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

현재로서는 html 파일에서 템플릿을 로드할 수 없습니다.

언급URL : https://stackoverflow.com/questions/45600891/reactjs-how-to-put-the-html-template-in-a-separate-file