react.eval
React 组件间通信(调用指定id的react组件实例)
我们都知道 document.getElementById('app') 可以用来获得 id 为 app 的dom元素 <div id="app"></div>
在react环境下,本组件提供获得指定id的react组件实例功能 <Toast id="toast" />
https://github.com/sunluna/react.eval
github(仓库和教程地址)使用本组件需要安装 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();
}
...