Maison > Article > interface Web > Explication détaillée de la définition et de l'utilisation des composants dans React

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

php中世界最好的语言original: 2018-05-24 14:39:581394parcourir

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