React中组件传值讲解

父传子

<子组件 自定义名1={要传给子组件的值1} 自定义名2...../>

函数式组件中-子组件通过添加形参来接收  形参我们就起名为props

父组件内
<HelloFunc age={19} name={'张三'}/>


子组件内
function 子组件(props) {
  return (<div>子组件的内容{props.name}---{props.age}</div>)
}

类组件中 通过this.props来获取

父组件内
<HelloFunc age={19} name={'张三'}/>


子组件内
class 子组件 extends Component {
  render() { return (<div>子组件的内容{this.props.name}---{this.props.age}</div>) }
}

注意

props 可以传递任意数据（数字 字符串 布尔类型 数组 对象 函数  jsx）

并且是只读的不能修改   

单向数据流（当父组件中的数据更新时，子组件就会自动接收到最新的数据）

子传父

在父组件中定义一个函数 并做为属性值传给子组件

在子组件中通过props调用父组件的函数 并传入子组件的数据

父组件内
class Parent extends React.Component {
    state: {
      num: 100
    }
    f1 = (num) => {
        this.setState({
            num: this.state.num + num
        })
    }
    render() {
        return (
            <div>
            	子组件：<Child f={this.f1} />
            </div>
        )
    }
}



子组件内
class Child extends React.Component {
    handleClick = (a) => {
    	this.props.f(a)
    }
    return (
    	<button onClick={()=>this.handleClick(1)}>+1</button>
    )
}

跨组件传值

由于需要多文件使用跨组件传值的方法 所以建议新建一个js文件 我给他取名context.js

调用createContext方法 并结构出需要用到组件 再按需导出

import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }

根组件中导入Provider

return (
  <Provider value={ 这里放要传递的数据 }>
  	<根组件的内容/>
  </Provider>
)

任意后代组件中导入Consumer

return (
	<Consumer>
  	{（data） => {
      // 这里的形参data 就会自动接收Provider中传入的数据
      return <组件的内容>
    }}
  </Consumer>
)

来个小demo讲解 根组件为App 他有两个子组件 Parent和Uncle  Parent中又有一个子组件为Son

 再Son组件中 和 根组件之间还有组件 所以形成了跨组件，可以跨多个组件