1.1.3 • Published 3 years ago
react-qs v1.1.3
react-qs
React跨组件选择器
安装
npm install react-qs --save
api
import { qsConnect, qsSelector, qsRef } from 'react-qs';
react-qs
react-qs用来存储组件的功能逻辑,不用层层传递也能调用。 比如目前有 TablePro组件,有刷新表格和重置功能等
1.需要在 TablePro 声明处使用 qsConnect
方法来连接组件和 react-qs 的通信
import { qsConnect } from 'react-qs';
@qsConnect()
class Index extends PureComponent {
onRefresh = () => {
}
render() {
...
}
}
2.然后在组件渲染的时候需要传入参数 qsName
这个用来区分组件的唯一性,react-qs 用来判断查找哪个是哪个组件
render(){
return (
<div>
<TablePro
qsName="userList" // 用于查询是当前组件
columns={this.columns}
service={userList}
/>
<TablePro
qsName="userList1" // 用于查询是当前组件
columns={this.columns}
service={userList}
/>
</div>
)
}
3.组件调用
通过 qsSelector 方法拿到组件,qsName,然后即可调用
import { qsSelector } from 'react-qs';
const Index = () => {
// 这个地方拿到对应的 qsName 声明的组件地方,直接在使用处调用就ok,
// 不用层层传递,但是必须组件提前有在渲染
// 这个地方的 refreshTable 对应第1步的 qsConnect参数的返回值,默认返回组件
const { onRefresh } = qsSelector('userList');
// 这里有个删除逻辑,然后直接调用就能刷新表格
const userDelete = async ({ id }) => {
await userDelete({ id });
await onRefresh(); // qsRef('userList').onRefresh();
};
...
}
qsSelector & qsRef 不同
qsSelector
可以先取值,后面代码在使用,但是 qsSelector 只能取方法,不能取属性,qsRef 可以全部取
import { qsSelector } from 'react-qs';
function App() {
const { onRefresh } = qsSelector('userList');
return (
<div>
<button
onClick={() => {
// 使用
console.log(onRefresh());
}}
>
测试
</button>
<TablePro
qsName="userList" // 用于查询是当前组件
/>
</div>
);
}
qsRef
必须等组件实例化后在使用
import { qsRef } from 'react-qs';
function App() {
return (
<div>
<button
onClick={() => {
// 使用
console.log(qsRef('userList').onRefresh());
}}
>
测试
</button>
<TablePro
qsName="userList" // 用于查询是当前组件
/>
</div>
);
}