Explication détaillée de la définition et de l'utilisation des composants dans React

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des définitions de composants dans React. Quelles sont les précautions lors de l'utilisation des définitions de composants dans React. Voici des cas pratiques, jetons un coup d'œil.

Composants

Les composants vous permettent de diviser l'interface utilisateur en widgets indépendants et réutilisables et de concevoir chaque widget individuellement.

Joue un rôle important dans les applications à page unique (SPA)

Implémentation simple des composants - composants fonctionnels

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

Composants de classe - syntaxe 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')
)

Composant de classe - Syntaxe 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')
)

Aperçu de l'effet

Résumé du composant

• La première lettre du nom du composant doit être en majuscule

• La fonction renvoie un nœud DOM virtuel

• Les composants de classe doivent avoir la méthode de rendu

• render Un nœud DOM virtuel doit être renvoyé

• Dans le travail réel, les composants de classe sont une méthode courante

Propriétés des composants (Props)

Étant donné que le composant est appelé sous forme de balises html et que les balises html peuvent ajouter des attributs, des attributs personnalisés peuvent également être ajoutés aux composants React, et les attributs sont obtenus à l'aide de la fonction this.props

Component

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')
)

Composant de classe

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)

En plus des propriétés du composant qui peuvent être transmises sous forme d'attributs de nœud DOM lorsqu'il est appelé, vous peut également définir la valeur d'attribut par défaut. Si la valeur d'attribut correspondante n'est pas transmise lors de l'appel, la valeur d'attribut par défaut sera utilisée.
getDefalutPropsCette méthode ne sera appelée qu'une seule fois.

//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'));

Règles de type de propriété (propTypes)

Normalement, lors de la définition d'un composant, les propriétés sont définies et certaines conditions d'utilisation sont ajoutées, comme certaines propriétés données. le type doit être un tableau, ou certains attributs ne peuvent pas être vides pour le moment, il peut être défini via 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 est facultatif par défaut, types couramment utilisés :

• PropTypes.array

• PropTypes.bool

• PropTypes.func

• PropTypes.number

• PropTypes.object

• PropTypes.string

• PropTypes.symbol

• PropTypes.any.isRequired

Composants

Les composants vous permettent de diviser l'interface utilisateur en widgets indépendants et réutilisables et de concevoir chaque widget individuellement.

Joue un rôle important dans les applications à page unique (SPA)

Implémentation simple des composants - composants fonctionnels

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

Composants de classe - syntaxe 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')
)

Composant de classe - Syntaxe 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')
)

Aperçu de l'effet

Résumé du composant

• La première lettre du nom du composant doit être en majuscule

• La fonction renvoie un nœud DOM virtuel

• Les composants de classe doivent avoir la méthode de rendu

• render Un nœud DOM virtuel doit être renvoyé

• Dans le travail réel, les composants de classe sont une méthode courante

Propriétés des composants (Props)

Étant donné que le composant est appelé sous forme de balises html et que les balises html peuvent ajouter des attributs, des attributs personnalisés peuvent également être ajoutés aux composants React, et les attributs sont obtenus à l'aide de la fonction this.props

Component

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')
)

Composant de classe

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)

En plus des propriétés du composant qui peuvent être transmises sous forme d'attributs de nœud DOM lorsqu'il est appelé, vous peut également définir la valeur d'attribut par défaut. Si la valeur d'attribut correspondante n'est pas transmise lors de l'appel, la valeur d'attribut par défaut sera utilisée.
getDefalutProps Cette méthode ne sera appelée qu'une seule fois.

//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高亮步骤详解

前端中排序算法实例详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!