Detaillierte Erläuterung der Komponentendefinition und -verwendung in React

Dieses Mal werde ich Ihnen die Verwendung von Komponentendefinitionen in React ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Komponentendefinitionen in React? Hier sind praktische Fälle.

Komponenten

Komponenten ermöglichen es Ihnen, die Benutzeroberfläche in unabhängige, wiederverwendbare Widgets zu unterteilen und jedes Widget individuell zu gestalten.

Spielt eine wichtige Rolle in Single-Page-Anwendungen (SPA)

Einfache Implementierung von Komponenten – funktionale Komponenten

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

Klassenkomponenten – ES5-Syntax

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

Klasse Komponente – ES6-Syntax

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

Effektvorschau

Komponentenzusammenfassung

• Der erste Buchstabe des Komponentennamens muss großgeschrieben werden

• Die Funktion gibt einen virtuellen DOM-Knoten zurück

• Klassenkomponenten müssen eine Rendermethode haben

• Render muss einen virtuellen DOM-Knoten zurückgeben

• In der tatsächlichen Arbeit sind Klassenkomponenten eine häufig verwendete Methode

Komponenteneigenschaften (Requisiten)

Aufgrund des Aufrufs von Die Komponente liegt in Form von HTML-Tags vor, und HTML-Tags können Attribute hinzufügen, sodass auch benutzerdefinierte Attribute zu React-Komponenten hinzugefügt werden können. Um Attribute zu erhalten, verwenden Sie this.props

Funktionskomponente

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

Klassenkomponente

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

Zusätzlich zur Übergabe von Werten in Form von DOM-Knotenattributen beim Aufruf können die Attribute der Komponente beim Aufruf auch den Standardattributwert festlegen Der entsprechende Attributwert wird nicht übergeben, der Standardattributwert wird verwendet.
getDefalutProps Diese Methode wird nur einmal aufgerufen.

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

Attributtypregeln (propTypes)

Normalerweise werden beim Definieren einer Komponente die Attribute definiert und einige Verwendungsbedingungen hinzugefügt, z. B. Der Datentyp muss ein Array sein, sonst dürfen einige Attribute nicht leer sein. Zu diesem Zeitpunkt kann es über propTypes festgelegt werden.

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 ist standardmäßig optional, häufig verwendete Typen:

• PropTypes.array

• PropTypes.bool

• PropTypes.func

• PropTypes.number

• PropTypes.object

• PropTypes.string

• PropTypes.symbol

• PropTypes.any.isRequired

Komponenten

Mit Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Widgets unterteilen und jedes Widget individuell gestalten.

Spielt eine wichtige Rolle in Single-Page-Anwendungen (SPA)

Einfache Implementierung von Komponenten – funktionale Komponenten

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

Klassenkomponenten – ES5-Syntax

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

Klasse Komponente – ES6-Syntax

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

Effektvorschau

Komponentenzusammenfassung

• Der erste Buchstabe des Komponentennamens muss großgeschrieben werden

• Die Funktion gibt einen virtuellen DOM-Knoten zurück

• Klassenkomponenten müssen eine Rendermethode haben

• Render muss einen virtuellen DOM-Knoten zurückgeben

• In der tatsächlichen Arbeit sind Klassenkomponenten eine häufig verwendete Methode

Komponenteneigenschaften (Requisiten)

Aufgrund des Aufrufs von Die Komponente liegt in Form von HTML-Tags vor, und HTML-Tags können Attribute hinzufügen, sodass auch benutzerdefinierte Attribute zu React-Komponenten hinzugefügt werden können. Um Attribute zu erhalten, verwenden Sie this.props

Funktionskomponente

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

Klassenkomponente

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

Zusätzlich zur Übergabe von Werten in Form von DOM-Knotenattributen beim Aufruf können die Attribute der Komponente beim Aufruf auch den Standardattributwert festlegen Der entsprechende Attributwert wird nicht übergeben, der Standardattributwert wird verwendet.
getDefalutProps Diese Methode wird nur einmal aufgerufen.

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

前端中排序算法实例详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Komponentendefinition und -verwendung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!