使用React怎么实现父子组件间传值

本篇文章为大家展示了使用React怎么实现父子组件间传值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都企业网站定制,高端网页制作,对加固等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业成都网站营销优化,H5建站,响应式网站。

父组件向子组件传值:

父组件:

import React, { Component } from 'react';
import Child from './chlid';

class parent extends Component{
 constructor(props) {
  super(props);
  this.state = {
   txt0:"默认值0",
   txt1:"默认值1"
  }
 }
 componentDidMount(){

 }
 parToson(){
  this.setState({
   txt0:"哈哈哈哈"
  })
 }
 sonToPar(e){
  this.setState({
   txt1:e
  })
 }
 render(){
  const style={
   paddingLeft:"150px"
  }
  return(
   
    传值给子组件
    
接受子组件的传值为:{this.state.txt1}
    
        
  )  } }

子组件:

import React, { Component } from 'react';

class child extends Component{
 constructor(props) {
  super(props);
  this.state = {
   msg:"啦啦啦啦"
  }
 }
 componentDidMount(){

 }
 render(){
  return(
   
    
接受父组件传的值为:{this.props.message}
    this.props.getsonToPar(this.state.msg)}>传值给父组件    
  )  } } export default child;

github:https://github.com/Rossy11/react/blob/master/src/component/router4.js

补充:

子组件向父组件传值,

同样是父组件:

import React from "react"

import ComentList from "./ComentList"
class Comment extends React.Component {

 constructor(props) {

  super(props);

  this.state = {

   parentText: "this is parent text",
   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

   },]

  }

 }
 fn(data) {

  this.setState({

   parentText: data //把父组件中的parentText替换为子组件传递的值

  },() =>{

   console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作

  });

 

 }
 render() {

  return (

   
    //通过绑定事件进行值的运算,这个地方一定要记得.bind(this),    不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变                

     text is {this.state.parentText}     

      
    )  } } export default Comment;

子组件:

import React from "react"
class ComentList extends React.Component {

 constructor(props) {

  super(props);

  this.state = ({

   childText: "this is child text"

  })
 }

 clickFun(text) {

  this.props.pfn(text)//这个地方把值传递给了props的事件当中

 }

 render() {

  return (

   

    
         {       this.props.arr.map(item => {        return (                   {item.userName} 评论是:{item.text}                 )       })      }     
    //通过事件进行传值,如果想得到event,可以在参数最后加一个event,     这个地方还是要强调,this,this,this           click me         
  )  } } export default ComentList;

before:

使用React怎么实现父子组件间传值

after:

使用React怎么实现父子组件间传值

上述内容就是使用React怎么实现父子组件间传值,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


分享名称:使用React怎么实现父子组件间传值
当前地址:http://csdahua.cn/article/pgdgpp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流