search
HomeWeb Front-endJS TutorialDetailed explanation of component definition and usage in React
Detailed explanation of component definition and usage in React
php中世界最好的语言
php中世界最好的语言
May 24, 2018 pm 02:39 PM
reactuseDetailed explanation

This time I will bring you a detailed explanation of the use of component definitions in React. What are the precautions for the use of component definitions in React. The following is a practical case, let's take a look.

Components

Components allow you to divide the UI into independent, reusable widgets, and design each widget individually.

Plays an important role in single page applications (SPA)

Simple implementation of components - functional components

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1 id="React-Component">React Component</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class components-ES5 syntax

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                </p><h1 id="Tom">Tom</h1>
                <h1 id="Sam">Sam</h1>
            
        )
    }
})
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class component - ES6 syntax

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                </p><h1 id="Tom">Tom</h1>
                <h1 id="Sam">Sam</h1>
            
        ) 
    }
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Effect preview

Component summary

  • The first letter of the component name must be capitalized

  • The function returns a virtual DOM node

  • Class components must have a render method

  • render must return a virtual DOM node

  • In actual work, class components are a commonly used method

Component properties (Props)

Because the call of the component is In the form of html tags, and html tags can add attributes, so custom attributes can also be added to React components, and the attributes are obtained using the this.props

function Component

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
    return <h1 id="name-props-name">name-{props.name}</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class component

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1 id="name-this-props-name">name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

DefaultProps

In addition to passing values ​​in the form of DOM node attributes when calling, the properties of components can also be set to default If the corresponding attribute value is not passed when calling, the default attribute value will be used.
getDefalutProps This method will only be called once. 

//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><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</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>
                </p><h1 id="姓名-this-props-name">姓名：{this.props.name}</h1>
                <h1 id="年龄-this-props-age">年龄：{this.props.age}</h1>
            
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<component1></component1>, document.getElementById('p1'));

Attribute type rules (propTypes)

Normally, when defining a component, the attributes are defined and some usage conditions are added, such as certain attribute values. Data type must be an array, or some properties cannot be empty. At this time, they can be set through propTypes. 

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

prop is optional by default, commonly used types:

  • PropTypes.array

  • PropTypes.bool

  • PropTypes.func

  • PropTypes.number

  • PropTypes.object

  • ##PropTypes.string

  • PropTypes.symbol

  • PropTypes.any.isRequired

Component

Components allow you to divide the UI into independent, reusable widgets, and design each widget individually.

Plays an important role in single page applications (SPA)

Simple implementation of components - functional components

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1 id="React-Component">React Component</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class components-ES5 syntax

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                </p><h1 id="Tom">Tom</h1>
                <h1 id="Sam">Sam</h1>
            
        )
    }
})
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class component - ES6 syntax

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                </p><h1 id="Tom">Tom</h1>
                <h1 id="Sam">Sam</h1>
            
        ) 
    }
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Effect preview

Component summary

  • The first letter of the component name must be capitalized

  • The function returns a virtual DOM node

  • Class components must have a render method

  • render must return a virtual DOM node

  • In actual work, class components are a commonly used method

Component properties (Props)

Because the call of the component is In the form of html tags, and html tags can add attributes, so custom attributes can also be added to React components, and the attributes are obtained using the

this.props

function Component

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
    return <h1 id="name-props-name">name-{props.name}</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

Class component

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1 id="name-this-props-name">name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)

DefaultProps

In addition to passing values ​​in the form of DOM node attributes when calling, the properties of components can also be set to default If the corresponding attribute value is not passed when calling, the default attribute value will be used.


getDefalutProps This method will only be called once. 

//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><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</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>
                </p><h1 id="姓名-this-props-name">姓名：{this.props.name}</h1>
                <h1 id="年龄-this-props-age">年龄：{this.props.age}</h1>
            
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<component1></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><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                
                    {                     this.props.subjects.map(function(_item){                         return 
  • {_item}
    •                     })                 }                 
                     )     } } //定义属性 name 为字符串且必须有值 Component1.propTypes = {     name: PropTypes.string } ReactDOM.render(, document.getElementById('p1'));

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

推荐阅读：

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

前端中排序算法实例详解

The above is the detailed content of Detailed explanation of component definition and usage in React. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Related Article
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack，而webpack依赖nodejs；webpack是一个模块打包机，在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack，所以react需要使用nodejs。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发；组件化是React的核心思想，可以开发出一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树，组件化开发也就是将一个页面拆分成一个个小的功能模块，每个功能完成自己这部分独立功能。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是：ReactDom只做和浏览器或DOM相关的操作，例如“ReactDOM.findDOMNode()”操作；而react负责除浏览器和DOM以外的相关操作，ReactDom是React的一部分。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
1 months agoByDDD
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
1 weeks agoByDDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Show More

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Show More

Hot Topics

Where is the login entrance for gmail email?
7412
15
CakePHP Tutorial
1359
52
What is the format of the account name of steam
76
11
win11 activation key permanent
20
19
Show More