react div onclick叠加_React项目里的父子组件传值和兄弟组件传值

React里常用的传值分为三种：正向传值(父传子)、逆向传值(子传父)、同级传值(兄弟组件传值)。

1正向传值

create-react-app项目里进行组件传值和state修改和之前学习的本地用法一样，传送门：

比如现在想实现从父组件Home.js传值给它的子组件New.js，这就是正向传值，并在New.js里进行state的修改，demo如下：

先用命令搭建好脚手架项目，然后在src下新建文件夹components用于放我们的组件父组件Home.js和它的子组件New.js，代码如下：

//App.js根组件import React from 'react';import logo from './logo.svg';import './App.css';//根组件里引入Home组件import Home from './components/Home'function App() {  return (    <div>      你好，我是根组件      <Home />    div>  );}export default App;

// Home.js父组件里import React, { Component } from 'react'//引入子组件New.jsimport News from './News'export default class Home extends Component {    render() {        return (            <div>                home                <News text="我是父组件Home要传给子组件News的值" />            div>        )    }}

// News.js子组件里import React, { Component } from 'react'export default class News extends Component {    constructor(props) {        super(props)        this.state = {            num: 123,            ziText: "我是子组件数据"        }    }    fun = () => {        this.setState({            num: 321        })    }    render() {        return (            

我是News组件,我从我的父组件Home.js接收到的数据是：{this.props.text} state：{this.state.num} this.fun}>点我修改state值                this.props.fufun.bind(this, this.state.ziText)}>点我向父组件Home发送数据

) }}

输入命令npm start运行看一下结果

当我们点击按钮之后，数字123改变成了321

2逆向传值

正向传值是父传子，逆向传值是子传父。比如现在有个场景是当我们点击子组件News.js组件的某个按钮时，我们想把子组件的某个数据传递给父组件Home.js,并让这条数据在父组件里显示出来，代码如下：

//App.js根组件import React from 'react';import logo from './logo.svg';import './App.css';//根组件里引入Home组件import Home from './components/Home'function App() {  return (    <div>      你好，我是根组件      <Home />    div>  );}export default App;

// News.js子组件里import React, { Component } from 'react'export default class News extends Component {    constructor(props) {        super(props)        this.state = {                    ziText: "我是子组件数据"        }    }       render() {        return (            <div>                    <button onClick={this.props.fufun.bind(this, this.state.ziText)}>点我向父组件Home发送数据button>            div>        )    }}

// Home.js父组件里import React, { Component } from 'react'//引入子组件New.jsimport News from './News'export default class Home extends Component {    constructor(props) {        super(props)        this.state = {            text: "我是要展示的默认数据"        }    }    datafun = (text) => {        console.log(text);        //点击子组件的按钮之后，修改父组件的默认text数据        this.setState({            text: text //第一个text是要修改的变量，第二个是接收到的数据。ES6里这里可以简写为一个text，因为键和值一样的话可以只写一个        })    }    render() {        return (            <div>                home---{this.state.text}                <News fufun={this.datafun} />            div>        )    }}

运行跑着看一下：

点击按钮之后，发现控制台也打印出了传过来的数据，视图也变了：

3同级传值

现在有个场景，父组件Home.js有News.js和Phone.js这两个子组件,现在当我们点击New.js组件里的某个按钮后，希望把数据传给它的兄弟组件Phone.js.

同级传值也就是兄弟组件传值，我们要用到pubsub。要用到pubsub首先我们要安装它，命令如下：

cnpm install --save pubsub-js

这里用的淘宝镜像，安装成功之后我们在New.js和Phone.js里都先引入一下pubsub.这里要注意的是，后面是'pubsub-js'而不是'pubsub.js'

import Pubsub from 'pubsub-js

根组件App.js、父组件Home.js、子组件News.js、子组件Phone.js详细代码如下：

// App.js根组件import React from 'react';import logo from './logo.svg';import './App.css';//根组件里引入Home组件import Home from './components/Home'function App() {  return (    <div>      <Home />    div>  );}export default App;

// Home.js父组件import React, { Component } from 'react'//引入子组件New.js、Phone.jsimport News from './News'import Phone from './Phone.js'export default class Home extends Component {    render() {        return (            <div>                <News />                <Phone />            div>        )    }}

// News.js子组件import React, { Component } from 'react'import Pubsub from 'pubsub-js'export default class News extends Component {    constructor(props) {        super(props)        this.state = {            num: 123        }    }    pubsub() {        Pubsub.publish("evt", this.state.num)    }    render() {        return (            <div>                <button onClick={this.pubsub.bind(this)}>点我向兄弟组件Phone.js传值button>            div>        )    }}

// Phone.js子组件里import React, { Component } from 'react'import Pubsub from 'pubsub-js'export default class Phone extends Component {    constructor(props) {        super(props)        Pubsub.subscribe("evt", (msg, data) => {            console.log('phone', data)        })    }    render() {        return (            <div>                phone            div>        )    }}

运行跑起来看一下：

当点击组件News.js里的按钮之后，发现在它的兄弟组件Phone.js的控制台打印出了数据123，兄弟传值成功。