前端学习（2309）：react之同级传值

Home,js

import React, {Component} from 'react';
import News from "./News";
class Home extends Component {
    constructor(props) {
        super(props);
        this.state={
            text:'我是默认值'
        }
    }
    dataFun=(text)=>{
        console.log(text)
        this.setState({
            text
        })
    }
    render() {
        return (
            <div>
                home---
                <p>{this.state.text}</p>
                <News name="你好" fufun={this.dataFun}/>
            </div>
        );
    }
}

export default Home;

news,js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import PubSub from 'pubsub.js'
class News extends Component {
    constructor(props) {
        super(props);
        this.state={
            num:1111,
            ziText:"我是子组件的值"
        }
    }

    fun(){
        this.setState({
            num:222
        })
    }
    pubsubb(){
        console.log(1)
        PubSub.publish("evt",this.state.num)
        console.log(1)
    }
    render() {
        return (
            <div>
                News-----{this.props.name}-----{this.state.num}
                <button onClick={this.fun.bind(this)}>哈哈</button>
                <button onClick={this.props.fufun.bind(this,this.state.ziText)}>发送</button>
                <button onClick={this.pubsubb.bind(this)}>点我进行同级传值</button>
            </div>
        );
    }
}

News.propTypes = {};

export default News;

app.js

import React from 'react';

import './App.css';
import  Home from './components/Home.js'
function App() {
  return (
    <div className="App">
      你好
    <Home></Home>
    </div>
  );
}

export default App;

phone.js

import React, {Component} from 'react';
import PubSub from 'pubsub.js'
class Phone extends Component {
    constructor(props) {
        super(props);
        PubSub.subscribe("evt",(msg,data)=>{
            console.log("phone"+data)
        })
    }
    render() {
        return (
            <div>
                phone
            </div>
        );
    }
}

export default Phone;