标签：Component React msg state ComentA props 组件 传值

一、父组件向子组件传值

1.父组件中定义要传的值

import React, { Component } from "react"
import "./assets/css/app.css"
// 引入组件A
import ComentA from "./components/ComentA"
 
 
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: "我是父组件的值"
    }
  }
  render () {
    return (
      <div>
        <span>这是app组件</span>
        //向子组件传递值,前面的变量名可自定义
        <ComentA msg={this.state.msg}></ComentA>
      </div>
    )
  }
}
 
 
export default App

2.在子组件中接收父组件传递过来的值

// import React, { Component } from "react"
//类组件的使用方法
// class ComentA extends Component {
//   constructor(props){
//     super(props)
//     this.state={
 
//     }
//   }
//   render () {
//     return (
//       <>
//         <div>
//           <p>我是组件A</p>
//           <p>{this.props.msg}</p>
//         </div>
//       </>
//     )
//   }
// }
 
//函数组件的使用方法
function ComentA (props) {
  //msg要和父组件定义的变量名相同
  const { msg } = props
  return (
    <>
      <div>
        <p>我是组件A</p>
        <p>父组件传的值：{msg}</p>
      </div>
    </>
  )
}
 
 
export default ComentA

二、子组件向父组件传值

1.子组件通过调用父组件函数传递值

let state = {
  coment: "我是组件A的值"
}
function ComentA (props) {
  const { msg, run } = props
 
  function getComent () {
    // 调用父组件传递过来的回调函数 并传入参数
    run(state.coment)
  }
  return (
    <>
      <div>
        <p>我是组件A</p>
        <p>{msg}</p>
        <button onClick={getComent}>给父组件传值</button>
      </div>
    </>
  )
}
 
export default ComentA

2.父组件通过函数回调取出子组件传过来的值

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: "我是父组件的值"
    }
  }
{/* 通过回调函数接收子组件的值*/}
  run = (data) => {
    // 打印子组件传过来的值
    console.log(data)
  }
  render () {
    return (
      <div>
        <span>这是app组件</span>
        {/*1.msg变量值传给子组件 2.回调函数传给子组件 */}
        <ComentA msg={this.state.msg} run={this.run}></ComentA>
      </div>
    )
  }
}

标签：Component,React,msg,state,ComentA,props,组件,传值
来源： https://www.cnblogs.com/littleDinosaurs/p/16498163.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。