011 create-react-app 组件之间的数据传递

本文主要是介绍011 create-react-app 组件之间的数据传递，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

子组件给父组件传值

创建一个News组件，在News组件里对父组件进行传值

import React, { Component } from 'react'
export default class News extends Component {constructor(props) {super(props);this.state = {id: "子组件News"};};render() {return (<div><h1>新闻内容{this.props.newsText}</h1><button type="button"onClick={this.props.homeSub.bind(this, this.state.id)}>点我传递数据给父组件</button></div>)}
}

创建Home组件，引用子组件，并创建homeSub函数，将homeSub函数传给子组件，用于接收子组件发来的数据。

import React, { Component } from 'react'
import News from './News'
export default class Home extends Component {constructor(props) {super(props);this.state = {id: "父组件Home"};};homeSub = (value) => {console.log(`News组件给Home组件传值内容：${value}`)}render() {return (<div><News text={"震惊，某某某竟然****了某某某"} homeSub={this.homeSub} /></div>)}
}

如下图所示，父组件成功的接收到了子组件的数据

同级组件之间传值

首先安装pubsub-js

npm i pubsub-js

在News组件里用PubSub设置传递事件，与传递的值

import React, { Component } from 'react'
import PubSub from "pubsub-js"
export default class News extends Component {pubsub() {//事件名为：toPhone，传值为：你有新消息了PubSub.publish("toPhone", "你有新消息了");}render() {return (<div><h1>新闻内容{this.props.newsText}</h1><button type="button" onClick={this.pubsub}>点我传递数据给Phone组件</button></div>)}
}

在Phone组件里用PubSub监听toPhone事件

import React, { Component } from 'react'
import PubSub from "pubsub-js"
export default class Phone extends Component {constructor(props) {super(props);//监听toPhone事件PubSub.subscribe("toPhone", (msg, data) => {console.log(`来自于News的消息:${data},监听事件:${msg}`)});}render() {return (<div><p>我是Phone组件</p></div>)}
}

在Home里将News和Phone同时使用（让他俩成为同级标签）

import React, { Component } from 'react'
import News from './News'
import Phone from './Phone'export default class Home extends Component {render() {return (<div><News text={"震惊，某某某竟然****了某某某"} homeSub={this.homeSub} /><Phone/></div>)}
}