react学习笔录(二)

一、组件通信

//props通信(适用于父子组件传递)
class App extends React.Component {
  render() {
    return (
      <div>
            { this.props.name }
      </div>
    );
  }
}

ReactDOM.render(
  <App name={ hello world } />,
  document.getElementById('root')
);

第三方库(下载pubsub-js)
https://github.com/mroderick/PubSubJS

//pubsub通信(适用于父孙、兄弟组件传递)

import PubSub from 'pubsub-js'   //安装后引入

class App extends React.Component {
  
  PubSub.publish('name', 'hello world!');   //发布消息

  render() {
    return (
      <div>
            hello
      </div>
    );
  }
}

class Name extends React.Component {
  
  componentDidMount() {

      //订阅消息
      PubSub.subscribe('name', (msg, data) => {
            console.log( msg, data );
      });  

  }

  render() {
    return (
      <div>
            hello
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 3,067评论 1 3
  • 自用收藏 原文:http://www.th7.cn/Program/IOS/201606/884245.shtml...
    西瓜皮奥特曼阅读 2,262评论 0 16
  • 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图...
    万忍阅读 1,528评论 0 6
  • 每个人都只能陪你走一段路。只能是一段路。——题记。 凌晨三点朦朦胧胧地醒来。发现昨晚给宝贝讲故事时睡着了,...
    三言三语阅读 1,039评论 0 1
  • 我是日记星球239号星宝宝,来自深圳的水晶晶,我正在参加日记星球第31期的复训蜕变之旅。我相信日积月累的力量,积跬...
    水晶妈咪阅读 184评论 0 2