首页 / REACT / react子给父传值

react子给父传值

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react子给父传值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1386字，纯文字阅读大概需要2分钟。

内容图文

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="test1"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
	//创建父组件
	class Father extends React.Component{
    constructor(){
      //this指向React.Component
      super()
      this.state={
        a:1,
        list:['a','b','c']
      }
    }
    father=(data)=>{
      console.log("111",data)
    }
		render(){
       //this指向React.Component
			return(
				<div>
             {/* 调用本身组件的函数 */}
        <div onClick={this.father}>父组件 </div> 
            {
              this.state.list.map((item)=>{
                 {/* 调用本身组件的函数并使用箭头函数包裹的方式给函数传递值   直接写成this.father(item)第一遍渲染时会执行 */}
                return <div onClick={()=>{this.father(item)}} key={item}>{item}</div>
              })
            }
            {/*给子组件绑定一个属性 这个属性会议对象的形式传递给子组件 */}
            <Childr father={this.father}></Childr>
          </div>
			  )
		  }
	}

  //创建子组件
  class Childr extends React.Component{
    constructor(){
      super()
    }
    state={
      b:'one'
    }
    child=()=>{
      // 接收到父组件传递过来的函数并调用，给函数传递值。父组件会执行函数，并接收到值
      const {father}=this.props
      father(this.state.b)
    }
    render(){
      return(
        <div onClick={this.child}>
          子组件
          </div>
      )
    }
  }
//渲染组件到页面
		ReactDOM.render(<Father/>,document.getElementById('test1'))
</script> 
</body>
</html>

内容总结

以上是互联网集市为您收集整理的react子给父传值全部内容，希望文章能够帮你解决react子给父传值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1016408.html

来源：【匿名】