react.eval

react.eval

React 组件间通信(调用指定id的react组件实例)

我们都知道 document.getElementById('app') 可以用来获得 id 为 app 的dom元素 <div id="app"></div>

在react环境下，本组件提供获得指定id的react组件实例功能 <Toast id="toast" />

github(仓库和教程地址) https://github.com/sunluna/react.eval

使用本组件需要安装 babel-plugin-transform-decorators-legacy

(https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#readme)

webpack1.x 配置=> webpack.config.js

...
module:{
    loaders:[
        {
            test:/.js[x]?$/,
            exclude: /node_modules/,
            loader:'babel-loader',
            query:{
                presets:['es2015','react','stage-0'],
                plugins:['transform-runtime','transform-decorators-legacy']
            }
        }
    ]
}

快速开始：

1、注册组件

import React from 'react';
import { ref } from 'react.eval';

@ref
class Toast extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      show:false,
    };
  }
  show=()=>{
    this.setState({
      show:true,
    });
  }
  render() {
    const { show } = this.state;
    return show && (
      <div>Hello world!!!</div>
    );
  }
}
export default Toast;

2、引用组件

...
<HomePage/>
<Toast id="toast" />
...

3、任意位置调用组件实例

import { refs } from 'react.eval';

...
    somewhere(){

        refs.toast.show();

    }
...