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>
        )
    }
}