Inhaltsverzeichnis
Komponentenrendering – bedingtes Rendering (dynamische Komponente)
Komponenten-Rendering – Listen-Rendering
Listen-Rendering – einfache Implementierung von
Listen-Rendering – Schleife für
Listen-Rendering – Schleifenkarte
Listen-Rendering – Objekt-Array
Listen-Rendering – Schlüssel
Komponentenrendering – untergeordnete Komponentenknoten
Heim Web-Frontend js-Tutorial Detaillierte Erläuterung des Komponenten-Renderings in React

Detaillierte Erläuterung des Komponenten-Renderings in React

May 24, 2018 pm 02:38 PM
react 使用 详解

Dieses Mal werde ich Ihnen die Verwendung des Komponenten-Renderings in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Komponenten-Renderings in React?

Komponentenrendering – bedingtes Rendering (dynamische Komponente)

In vielen Fällen werden Komponenten dynamisch gerendert, z. B. wenn Sie angemeldet sind, wird „abgemeldet“ angezeigt, andernfalls wird „angemeldet“ angezeigt in

import React from 'react'
let Login = (props) => {
    return <input type="button" value="login" onClick={props.click}/>;
}
let Logout = (props) => {
    return <input type="button" value="logout" onClick={props.click}/>;
}
export default class CP extends React.Component{
    state = {
        status: 0
    }
    login(){
        this.setState({status: 1})
    }
    logout(){
        this.setState({status: 0})
    }
    render(){
        let button = null;
        if(this.state.status == 0){
            button = <Login click={this.login.bind(this)}/>
        } else {
            button = <Logout click={this.logout.bind(this)} />
        }
        return <p>{button}</p>
    }
}
Nach dem Login kopieren

Effektvorschau

Komponenten-Rendering – Listen-Rendering

React hat keine Anweisungen, daher müssen Sie ein Array verwenden, um das Listen-Rendering abzuschließen.

Listen-Rendering – einfache Implementierung von

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let lis = [<li key="Javascript">Javascript</li>, <li key="Vue">Vue</li>, <li key="React">React</li>]
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)
Nach dem Login kopieren

Listen-Rendering – Schleife für

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']
    let lis = [];
    for(let frm of frms){
        lis.push(<li key={frm}>{frm}</li>)
    }
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)
Nach dem Login kopieren

Listen-Rendering – Schleifenkarte

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']
    let lis = data.map((frm) => {
        return <li key={frm}>{frm}</li>
    });
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)
Nach dem Login kopieren

Listen-Rendering – Objekt-Array

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component {
    constructor(props){
        super(props)
    }
    static defaultProps = {
        students: [
            {id: 1, name: 'Tom', age: 18, gender: 1}, 
            {id: 2, name: 'Sam', age: 22, gender: 1}, 
            {id: 3, name: 'Lucy', age: 20, gender: 0}
        ]
    }
    getKeys(item = {}){
        return Object.keys(item)
    }
    render(){
        return (
            <table>
                <thead>
                    <tr>
                        {
                            this.getKeys(this.props.students[0]).map((key) => {
                                return <th key={key}>{key}</th>
                            })
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.students.map((obj) => {
                            return (
                                <tr key={obj.id}>
                                    {
                                        this.getKeys(obj).map((key, idx) => {
                                            return <td key={key + idx}>{obj[key]}</td>
                                        })
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        )
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
Nach dem Login kopieren

Listen-Rendering – Schlüssel

Da React ein Prozess vom virtuellen DOM zum realen DOM ist und DOM selbst ein Objekt ist, hat das Objekt standardmäßig keine eindeutige Kennung, also muss es eine sein manuell durchgeführt angegeben.

Mit Hilfe von Tasten erkennt React, welche Elemente geändert, hinzugefügt oder entfernt wurden. Jedes Element im Array sollte durch einen eindeutigen und unveränderlichen Schlüssel identifiziert werden.

Schlüssel werden beim Rendern von Listen verwendet und müssen unter den Geschwisterelementen eindeutig sein.

Komponentenrendering – untergeordnete Komponentenknoten

Da die Komponente als DOM-Knoten aufgerufen wird, kann die Komponente untergeordnete Knoten enthalten. React erhält die untergeordneten Knoten einer Komponente über this.props.children. Normalerweise treten bei this.props.children die folgenden Situationen auf:

  1. Wenn die aktuelle Komponente keine untergeordneten Knoten hat, ist sie undefiniert

  2. Wenn es einen untergeordneten Knoten gibt, ist der Datentyp Objekt

  3. Wenn es mehrere untergeordnete Knoten gibt, ist der Datentyp Array

Um diese Situation zu lösen, in der Datentypen inkonsistent sind und während der Verwendung eine ständige Beurteilung erfordern, stellt React eine Methode Reacth.Children zur Handhabung dieses Attributs bereit.

var Component1 = React.createClass({
    render: function(){
        return (
            <p>                        
                {
                    React.Children.map(this.props.children, function(childNode){
                        return <li>{childNode}</li>
                    })
                }
            </p>
        );
    }
})
ReactDOM.render(
    <Component1>
        <span>Tom</span>
        <span>Sam</span>
    </Component1>, document.getElementById('p1'));
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des Sortieralgorithmus-Beispiels im Frontend

Detaillierte Erläuterung der Implementierungsschritte von PromiseA+

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mar 18, 2024 pm 02:58 PM

Mar 18, 2024 am 10:58 AM

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11

So verwenden Sie NetEase Mailbox Master So verwenden Sie NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

So verwenden Sie NetEase Mailbox Master

So verwenden Sie die Baidu Netdisk-App So verwenden Sie die Baidu Netdisk-App Mar 27, 2024 pm 06:46 PM

So verwenden Sie die Baidu Netdisk-App

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL

Erfahren Sie, wie Sie die neuen erweiterten Funktionen von iOS 17.4 „Schutz vor gestohlenen Geräten' nutzen. Erfahren Sie, wie Sie die neuen erweiterten Funktionen von iOS 17.4 „Schutz vor gestohlenen Geräten' nutzen. Mar 10, 2024 pm 04:34 PM

Erfahren Sie, wie Sie die neuen erweiterten Funktionen von iOS 17.4 „Schutz vor gestohlenen Geräten' nutzen.

BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden? BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden? Apr 26, 2024 am 09:40 AM

BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?

See all articles