组件祖孙传值_react组件间的传值

在react中组件件的传值，可以是父子之间的传值，也可以是非父子之间(兄弟之间)的传值。

父子间的传值：(1)、父传子：子组件如果是类组件，通过this.props获取父组件传递过来的值；子组件如果是无状态组件，则通过props获取父组件传递过来的值。

(2)、子传父：主要是调用父组件传过来的方法，把实参传递到父组件方法中的实参中。

兄弟间的传值：主要用pubsub-js插件完成

1、父子组件之间的传值

(1)、父传子

父组件中：

class App extends React.Component{

render(){

return

//Counter为子组件 ,n为父组件App传给子组件的值

}

}

子组件是类组件：

class Counter extends React.Component{

constructor(props){

super(props);

//在constructor钩子函数中可通过prpos获取父组件传给子组件的值

console.log(props.n); //输出999

}

render(){

//在其他钩子函数中通过this.prpos获取父组件传给子组件的值

console.log(this.props.n); //输出999

return

counter

}

}

子组件是无状态组件：

var Counter=(props)=>{

// 通过prpos获取父组件传给子组件的值

console.log(props.n); //输出999

return

counter

}

(2)、子传父

在父组件father.js中

import React, { Component } from 'react'

import Child from "../child" //引入子组件child

export default class Father extends Component {

add(str){ //形参

console.log(str); //str为child组件中当输入框按下回车键的值

}

render() {

return (

{/*把方法add传给子组件child*/}

)

}

}

在子组件child.js中

import React, { Component } from 'react'

export default class Child extends Component {

input=(e)=>{ //e为事件对象

if(e.keyCode==13){ //按下了回车键

this.props.add(e.target.value) //调用father父组件传递过来的方法，把输入框的值作为实参传给父组件father

}

}

render() {

return (

{/*输入框绑定键盘事件*/}

)

}

}

2、兄弟组件之间的传值

1、安装插件：使用npm安装:npm i pubsub-js

2、传值的组件和接受的组件都要引入pubsub-js

import Pubsub-js from "pubsub-js"

3、所要传值的组件：  PubSub.publish("事件名","数据")；

所要接受值得组件： PubSub.subscribe("事件名",(evt,data)=>{ })

注意：事件名一定要相同

传值的组件中：

import React, { Component } from 'react'

import PubSub from "pubsub-js"

export default class PubSub2 extends Component { //传值的组件

constructor(props){

super(props)

}

send=()=>{

PubSub.publish("event","SSS") //所要传值得组件,第一个参数为事件名，第二个参数为所要传的值

}

render() {

return (

pub2send

)

}

}

接收传值的组件中：

import React, { Component } from 'react'

import PubSub from "pubsub-js"

export default class PubSub2 extends Component { //传值的组件

constructor(props){

super(props)

}

send=()=>{

PubSub.publish("event","SSS") //所要传值得组件,第一个参数为事件名，第二个参数为所要传的值

}

render() {

return (

pub2send

)

}

}

结语：以上就为简单的父子组件之间和非父子组件之间传值的基本过程。除此之外，react传值的方式还有上下文context对象传值，用context进行组件间的传值可以解决祖孙组件之间传值必须一代一代往下传的问题。这种传值方式较为灵活，祖辈的组件可以直接传值到后辈的任何一个组件，方便又灵活。

标签：Component,js,react,props,组件,import,传值

来源： https://www.cnblogs.com/z-1802742248/p/12359099.html