Le contenu de cet article est une introduction à la communication des composants React (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
J'ai été libre d'étudier le framework React par moi-même récemment. Tous les problèmes et expériences au cours du processus d'auto-apprentissage seront enregistrés ici. J'espère que cela pourra aider les étudiants qui apprennent le framework React sans plus. ado, parlons du code.
Tout d'abord, passer de père en fils :
import React, { Component } from 'react'; import Com1 from './componments/com1' class App extends Component { constructor(props){ super(props) this.state = { arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] }; this.foo = "我来自父组件" //这个也是父传子方法,可能初学者有点迷,刚开始我也用来和arr = {this.state.arr}做区分 }; render() { return ( <div> <header> <img alt="Introduction à la communication des composants React (exemple de code)" > </header> <com1></com1> </div> ); } } export default App;
Composante enfant :
import React, { Component } from 'react'; class Ele extends Component{ constructor(props){ super(props) }; render(){ return ( <div> <h1>Hello, {this.props.age}</h1> <p>{this.props.fn}</p> <ul> { this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr,然后在{}里面进行js的循环 return ( <li> {item.userName} 评论是:{item.text} </li> ) }) } </ul> </div> ); }; } export default Ele;
Le résultat montre :
Ce qui précède est la méthode de transmission du parent à l'enfant. La méthode principale consiste à utiliser des accessoires pour transmettre des valeurs. Jetons un coup d'œil à la transmission des valeursdu composant parent :
Ce qui précède est la méthode de transfert de valeur entre les composants parent et enfant. Veuillez me corriger s'il y a des erreurs.
Il existe également un transfert de valeur entre les composants frères et sœurs que je n'ai pas encore appris. le mettra à jour après avoir pris connaissance du transfert de valeur entre les composants frères et sœurs. Venez
import React, { Component } from 'react'; class Ele extends Component{ constructor(props){ super(props); this.state = ({ childText: "我来自子组件" }) }; clickFun(text) { //定义触发的方法 this.props.pfn(text)//这个地方把值传递给了props的事件当中 } render(){ return ( <div> {/* 通过事件进行传值,如果想得到event,可以在参数最后加一个event, 这个地方还是要强调,this,this,this */} <button> 传值 </button> </div> ); }; } export default Ele;
[Recommandations associées :
Tutoriel vidéo Reactimport React, { Component } from 'react'; import Com1 from './componments/com1' class App extends Component { constructor(props){ super(props) this.state = { parentText: "现在是父组件", }; fn(data) { this.setState({ parentText: data //把父组件中的parentText替换为子组件传递的值 },() =>{ console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作 }); }; render() { return ( <div> <com1></com1> {/*通过绑定事件进行值的运算,这个地方一定要记得.bind(this),不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变 */} <p>text is {this.state.parentText}</p> </div> ); } } export default App;
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!