Explication détaillée du rendu des composants dans React

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du rendu de composants dans React. Quelles sont les précautions lors de l'utilisation du rendu de composants dans React. Voici un cas pratique, jetons un oeil.

Rendu des composants - rendu conditionnel (composant dynamique)

Dans de nombreux cas, les composants sont rendus dynamiquement, comme l'état de connexion, la déconnexion sera affichée, sinon la connexion sera affichée.

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>
    }
}

Aperçu de l'effet

Rendu des composants - Rendu de la liste

React n'a pas d'instructions, vous devez donc utiliser un tableau pour terminer le rendu de la liste.

Rendu de liste - implémentation simple

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

Rendu de liste - boucle pour

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

Rendu de liste - carte de boucle

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

Rendu de liste - tableau d'objets

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

Rendu de liste - clés (Clés)

Parce que React est un processus allant du DOM virtuel au DOM réel, et que le DOM lui-même est un objet, objet Il n'y a pas d'identifiant unique par défaut, vous devez donc le spécifier manuellement.

Les clés aident React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés. Chaque élément du tableau doit être identifié par une clé unique et immuable.

Les clés sont utilisées dans le rendu de liste et doivent être uniques parmi les éléments frères.

Rendu du composant - nœuds enfants du composant

Étant donné que le composant est appelé en tant que nœud DOM, le composant peut contenir des nœuds enfants. React obtient les nœuds enfants d'un composant via this.props.children Habituellement, this.props.children aura les situations suivantes

1. Si le composant actuel n'a pas de nœuds enfants, il n'est pas défini

   <.>
2. S'il y a un nœud enfant, le

   type de données est un objet

3. S'il y a plusieurs nœuds enfants, le type de données est un tableau

Afin de résoudre cette situation où les types de données sont incohérents et nécessitent un jugement constant lors de l'utilisation, React fournit une méthode

pour gérer cet attribut. Reacth.Children

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'exemple d'algorithme de tri dans le front-end

Explication détaillée des étapes de mise en œuvre de PromesseA+

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!