React 父子组件传值

React 父子组件传值

组件传值主要是使用的this.props方法

class

1. 父组件向子组件传值

父组件向子组件传递数据的时候先要在父组件初始化一个state，子组件通过this.props接收就行

1. 父组件部分

   import React from 'react'
   import Home from './Pages/home'
   export default class App extends React.Component {
       constructor() {
           super()
           this.state = {
               value: '这是父组件传递给子组件的数据'
           }
       }
       render() {
           return <Home value={this.state.value}></Home>
       }
   }
   

2. 子组件部分

   import React from 'react'
   export default class Home extends React.Component {
       constructor() {
           super()
           this.state = {
               text: 'React'
           }
       }
       render() {
           return (
               <div>
                   <h4>{this.props.value}</h4>
               </div>
           )
       }
   }
   

3. 效果图
   

2. 子组件向父组件传递数据

子组件向父组件传递的数据的时候，子组件使用this.props.event绑定一个事件名，父组件通过这个event的事件名接收到数据

1. 子组件部分（子组件通过this.props.event()向父组件传递参数）

   import React from 'react'
   export default class Home extends React.Component {
       constructor() {
           super()
           this.state = {
               text: 'React'
           }
       }
       // 向父组件传递数据
       changePer() {
           this.props.tranPer('我是子组件向父组件传递的数据')
       }
       render() {
           return (
               <div>
                   <h3>Hello {this.state.text}</h3>
                   {/* 子组件接收父组件的参数 */}
                   <h4>{this.props.value}</h4>
                   <button onClick={this.changePer.bind(this)}>修改父组件传递的数据</button>
               </div>
           )
       }
   }
   

2. 父组件部分（父组件通过绑定event自定义的事件名接收参数）

   import React from 'react'
   import Home from './Pages/home'
   export default class App extends React.Component {
       constructor() {
           super()
           this.state = {
               value: '这是父组件传递给子组件的数据'
           }
       }
       // 接收子组件传递的参数，data中存放的就是传递的数据
       getSon(data) {
           this.setState({
               value: data
           })
       }
       render() {
           return <Home value={this.state.value} tranPer={ this.getSon.bind(this) }></Home>
       }
   }
   

3. 效果图
   

Hook

父传子, 父组件直接在子组件的html上传递参数, 子组件通过props获取

父组件

import React from 'react'
import ChildrenCom from './children'

const FatherCom = () => {
  return (
    <div>
      <ChildrenCom test="我是父组件传递的数据"/>
    </div>
  )
}
export default FatherCom

子组件

import React from 'react'
const ChildrenCom = (props) => {
  const { test } = props

  return (
    <div>
      <p>ChildrenCom-----{test}</p>
    </div>
  )
}
export default ChildrenCom

子传父,子组件通过触发事件, 父组件通过事件中的参数获取

子组件

import React from 'react'
const ChildrenCom = (props) => {
	const changeText = () => {
	    const setStr = new Date().getTime() + '修改children子组件'
	    props.tranChildrenData(setStr)
  	}

  return (
    <div>
      <button onClick={changeText}>修改children子组件</button>
    </div>
  )
}
export default ChildrenCom

父组件

import React from 'react'
import ChildrenCom from './children'

const FatherCom = () => {
	const getChildrenData = (data: string)=> {
	    console.log(data, 'data')
  	}
  return (
    <div>
      <ChildrenCom tranChildrenData={getChildrenData}/>
    </div>
  )
}
export default FatherCom