react.js - 这个巨高大上的React组件通信工具，不会用

问题描述

问 题

想实现react兄弟组件之间的通信，redux还没开始上手，所以选择了据说是react团队使用的js-signals。
先做了个demo：

const App = () => (
  <div>
    <Header />
    <Main />
  </div>

);

只有两个组件，Header和Main，代码如下：

//Header

import React, { Component } from 'react';
import Signal from 'signals';

class Header extends Component {
  render() {
    //custom object that dispatch a `started` signal
    const myObject = {
      started: new Signal()
    }
    const onStarted = (param1, param2) => {
      alert(param1 + param2);
    }
    myObject.started.add(onStarted); //这里应该是加监听吧？但我不确定应该怎么写
    return (
      <div>
        Header
      </div>
    )
  }
}

export default Header

//Main
import React, { Component } from 'react';
import Signal from 'signals';

class Main extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('已触发点击')
    myObject.started.dispatch('foo', 'bar'); 
    //上面那句应该是传值到Header组件里并触发started函数
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        点击触发函数
      </div>
    )
  }
}

export default Main

我是看着js-signals的这个最简单的例子弄的

官方链接

但是点击onClick之后会报错，

说是myObject未定义，但在Main组件里定义似乎又不太合逻辑……吧？
监听和触发这两句不确定应该写在哪里才对

myObject.started.add(onStarted); //add listener
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.remove(onStarted); //remove a single listener

谁能帮我梳理一下呢？谢谢～

解决方案

新建一个myObj.js里面写

import Signal from 'signals';
const myObject = {
      started: new Signal()
}
export default myObject

然后你再在Header.jsx和main.jsx里写

import myObject from './myObj.js'

这篇关于react.js - 这个巨高大上的React组件通信工具，不会用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！