简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

React의 컴포넌트 정의 및 사용법에 대한 자세한 설명

php中世界最好的语言
풀어 주다： 2018-05-24 14:39:58
원래의
1396명이 탐색했습니다.

이번에는 React에서 컴포넌트 정의를 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 컴포넌트 정의를 사용할 때 주의사항은 무엇인가요?

Components

Components를 사용하면 UI를 독립적이고 재사용 가능한 위젯으로 나누고 각 위젯을 개별적으로 디자인할 수 있습니다.

단일 페이지 애플리케이션(SPA)에서 중요한 역할을 합니다

간단한 구성 요소 구현 - 기능 구성 요소

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

Class 구성 요소 - ES5 구문

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        )
    }
})
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

Class 구성 요소 - ES6 구문

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        ) 
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

효과 미리 보기

구성 요소 요약

  • 컴포넌트 이름의 첫 글자는 대문자여야 합니다

  • 함수는 가상 DOM 노드를 반환합니다

  • 클래스 컴포넌트에는 렌더링 메서드가 있어야 합니다

  • 렌더는 가상 DOM 노드를 반환해야 합니다

  • 실제 작업 그 중 클래스 컴포넌트가 흔히 사용되는 방식입니다

컴포넌트 속성(Props)

컴포넌트는 html 태그 형태로 호출되기 때문에 html 태그는 속성을 추가할 수 있으므로 커스텀 속성도 React 컴포넌트에 추가할 수 있습니다. , 속성은 this.propsthis.props

函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

类组件

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1>name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

默认属性(DefaultProps)

组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
getDefalutProps 这个方法只会被调用一次。

//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
    getDefaultProps: function(){
        return {
            name: 'Tom',
            age: 20
        }
    },
    render: function(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            </p>
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            <p>
                <h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            </p>
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

属性的类型规则(propTypes)

通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                <ul>
                {
                    this.props.subjects.map(function(_item){
                        return <li>{_item}</li>
                    })
                }
                </ul>
            </p>
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

prop 默认情况下是可选，常用的类型：

  • PropTypes.array

  • PropTypes.bool

  • PropTypes.func

  • PropTypes.number

  • PropTypes.object

  • PropTypes.string

  • PropTypes.symbol

  • PropTypes.any.isRequired

组件

组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。

在单页面应用(SPA)中扮演着重要角色

组件简单实现 —— 函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

类组件 —— ES5 语法

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        )
    }
})
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

类组件 —— ES6 语法

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        ) 
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

效果预览

组件小结

  • 组件名首字母必须为大写

  • 函数返回一个虚拟 DOM 节点

  • 类组件必须要有 render 方法

  • render 必须返回一个虚拟 DOM 节点

  • 实际工作中，类组件是常用的方式

组件属性(Props)

因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 React 的组件当中也是可以添加自定义的属性，而属性的获取则用 this.props

函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

类组件

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1>name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    document.getElementById('app')
)
로그인 후 복사
로그인 후 복사

默认属性(DefaultProps)

组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
getDefalutProps

기능적 구성 요소

//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
    getDefaultProps: function(){
        return {
            name: 'Tom',
            age: 20
        }
    },
    render: function(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            </p>
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            <p>
                <h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            </p>
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

클래스 컴포넌트

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                <ul>
                {
                    this.props.subjects.map(function(_item){
                        return <li>{_item}</li>
                    })
                }
                </ul>
            </p>
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

DefaultProps

컴포넌트의 속성 외에도 다음과 같은 경우 DOM 노드 속성의 형태로 값을 전달할 수 있습니다. 호출 시 해당 속성값이 전달되지 않으면 기본 속성값을 사용하도록 설정할 수도 있습니다.
getDefalutProps 이 메소드는 한 번만 호출됩니다. 🎜rrreee

속성 유형 규칙(propTypes)

🎜일반적으로 구성 요소를 정의할 때 속성이 정의되고 일부 속성 값의 데이터 유형 🎜은 배열이어야 하며, 그렇지 않으면 현재 일부 속성이 비어 있을 수 없습니다. , propTypes를 통해 설정할 수 있습니다. 🎜rrreee🎜prop는 기본적으로 선택 사항이며 일반적으로 사용되는 유형은 🎜🎜🎜🎜PropTypes.array🎜🎜🎜🎜PropTypes.bool🎜🎜🎜🎜 PropTypes입니다. func🎜🎜🎜🎜PropTypes.number🎜🎜🎜🎜PropTypes.object🎜🎜🎜🎜PropTypes.string🎜 🎜🎜 🎜PropTypes.symbol🎜🎜🎜🎜PropTypes.any.isRequired🎜🎜🎜🎜Component🎜🎜Component를 사용하면 UI를 독립적이고 반복 가능한 위젯으로 나눌 수 있으며 각 위젯은 위젯은 개별적으로 디자인될 수 있습니다. 🎜🎜단일 페이지 애플리케이션(SPA)에서 중요한 역할을 합니다🎜🎜간단한 구성 요소 구현 - 기능 구성 요소🎜rrreee🎜Class 구성 요소 - ES5 구문🎜rrreee🎜Class 구성 요소 - ES6 구문🎜rrreee🎜효과 미리 보기🎜🎜구성 요소 요약🎜🎜🎜 🎜컴포넌트 이름의 첫 글자는 대문자여야 합니다🎜🎜🎜🎜함수는 가상 DOM 노드를 반환합니다🎜🎜🎜🎜클래스 컴포넌트에는 렌더링 메서드가 있어야 합니다🎜🎜🎜🎜렌더는 가상 DOM 노드를 반환해야 합니다🎜🎜🎜🎜실제 작업 그 중 클래스 컴포넌트가 흔히 사용되는 방식입니다🎜🎜🎜🎜컴포넌트 속성(Props)🎜🎜컴포넌트는 html 태그 형태로 호출되기 때문에 html 태그는 속성을 추가할 수 있으므로 커스텀 속성도 React 컴포넌트에 추가할 수 있습니다. , 속성은 this.props🎜

기능적 구성 요소

rrreee

클래스 컴포넌트

rrreee

DefaultProps

🎜컴포넌트의 속성 외에도 다음과 같은 경우 DOM 노드 속성의 형태로 값을 전달할 수 있습니다. 호출 시 해당 속성값이 전달되지 않으면 기본 속성값을 사용하도록 설정할 수도 있습니다.
getDefalutProps 이 메소드는 한 번만 호출됩니다. 🎜
//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
    getDefaultProps: function(){
        return {
            name: 'Tom',
            age: 20
        }
    },
    render: function(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            </p>
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            <p>
                <h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            </p>
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

属性的类型规则(propTypes)

通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                <ul>
                {
                    this.props.subjects.map(function(_item){
                        return <li>{_item}</li>
                    })
                }
                </ul>
            </p>
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
로그인 후 복사
로그인 후 복사
로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

前端中排序算法实例详解

위 내용은 React의 컴포넌트 정의 및 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
react 使用 详解
원천：php.cn
이전 기사：React의 컴포넌트 렌더링에 대한 자세한 설명 다음 기사：React의 JSX 구문 사용법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
React Three Fiber: 스크롤 이벤트가 지연되는 이유는 무엇입니까? ReactThreeFiber에는 카메라 줌 전체에 걸쳐 유지하려는 스프라이트를 생성하는 React 구성 요소가 있습니다. 알고리즘은 작동하는 것 같지만(시간이 지...
에서 2024-04-06 13:39:24
0
1
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！