在两个独立的 React App 之间通信用什么思路

#1

比如

ReactDOM.render(<A />, ea);
ReactDOM.render(<B />, eb);

A 中的某种操作引发 B 中的 action

React不存在父子关系的两个组件之间通信
#2

用事件（https://www.npmjs.com/package/events）

var EventEmitter = require('events');

class A extend components {
  handleClick() {
    this.props.emitter.emit('a.click');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click!</button>
    );
  }
}

class B extend components {
  comonentDidMount() {
    this.props.emitter.on('a.click', () => {
      this.setState({count: this.state.count + 1});
    });
  }

  render() {
    return (
      <div>{this.state.count}</div>
    );
  }
}

var emitter = new EventEmitter;

ReactDOM.render(<A emitter={emitter} />, ea);
ReactDOM.render(<B emitter={emitter} />, eb);
1 Like
#3

事件监听最方便，但是搞多了维护起来很困难。
teambition复杂页面的做法一般是：
parentApp 给 subApp-A 一个callback方法，回调中去操作 subApp-B
供参考！

#4

你这样的前提是有 controllerview 把所有的组件包起来，我现在只有两个完全独立的组件

不过这么一说我也觉得很奇怪，为什么我的组件是独立的

#5

React.render渲染出来的组件也可以向props里面传递回调函数

独立多个组件也没问题吧，只要数据流清晰分工明确，反而还有好处

#6

你的意思是 用一个非 ReactApp 往 AppA 和 AppB 里面注入吗

#7

嗯，普通js函数就行啊

#8

这个思路不错，我试试看

#10

[quote=“Simmer, post:9, topic:2869, full:true”]
可以使用Pubsub 发布订阅模式，避免组件之间通信可能会发生的链式调用。 我最近用React和Redux做的一个Todo应用就使用了。不过比较简单的实现，你可以看下
[/quote]Pubsub

#11

使用 react.eval 可以直接实现你的目的


#12

如果是两个单独的单页应用，需要通讯也是有可能的。