Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Komponenten-Renderings in 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?
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> } }
Effektvorschau
React hat keine Anweisungen, daher müssen Sie ein Array verwenden, um das Listen-Rendering abzuschließen.
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') )
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') )
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') )
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') )
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.
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:
Wenn die aktuelle Komponente keine untergeordneten Knoten hat, ist sie undefiniert
Wenn es einen untergeordneten Knoten gibt, ist der Datentyp Objekt
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'));
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!