# react-rc2plugin
**Repository Path**: yanhuakang/react-rc2plugin
## Basic Information
- **Project Name**: react-rc2plugin
- **Description**: **将React组件转为插件或js，以支持在Vue、js项目中运行**
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-10
- **Last Updated**: 2023-07-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# react-rc2plugin
**将React组件转为插件或js，以支持在Vue、js项目中运行**
## 使用
在你的组件包中
```shell
npm i react-rc2plugin
```
### 包装组件
```js
import { WarpUmd, FormParser } from 'react-rc2plugin'
// 你的react组件 HelloWorld
const HelloWorld = ({ text }) => {
return {text}
}
// 使用 rc2plugin 的 WarpUmd将你的 React组件包裹一下，用来生成插件
const render = WarpUmd(HelloWorld, {
name: "pluginName",
parser: FormParser,
}, {
// 插件接收的入参
text: undefined
})
export {
render
}
```
### 发布插件
以 `umd` 方式编译打包上面包装后的组件，然后将编译后的文件放在 `lib` 项目中，走苍穹、青龙发布即可
### 使用插件
在 `html` 中引入以下文件
```html
Demo
```
#### 在 JS 中使用插件
```html
```
#### 在 Vue 中使用插件
在 Vue 中如果你的插件载体标签为 `input` 或者 `textarea`，则支持组件触发onChange时 触发`v-model`机制，更新`v-model`绑定的数据，但这只是单向数据流。
```html
立即创建
```
### 插件载体标签
- 当你的插件载体标签为 `input` 或者 `textarea` 时，`WarpUmd`认为当前插件是一个表单元素，会将该载体标签 `hidden`，同时在其后面动态创建一个 `div`，将 React 组件挂载在上面；
- 当你的插件载体标签为 `div` 时，`WarpUmd`认为当前插件需要直接将 React 组件挂载在上面；
### 传参
入参接受三种方式
1. 函数入参，此方式权重最高，**推荐此方式（性能最高，兼容最好）**
```js
$('#rc1').pluginName({
text: 'Hello world!'
});
```
2. `data-`，此方式权重居次
```html
```
3. `attr`，此方式权重最低
```html
```
### 插件其他注意事项
1. 在`JS` 或 `Vue` 中使用时，若没有引入 `jQuery` ，则不能以 `jQuery插件` 形式调用，可以使用函数形式调用，如下
```js
pluginName.render({
container: document.getElementById('rc1'),
text: 'Hello world!'
})
```
2. 当你的插件载体标签为 `input` 或者 `textarea` 时，不会接受 `name` 属性，而是接受 `data-name`，因为 `name` 是表单元素的关键字；
3. `rc2plugin` 内部 `externals` 已经声明了外部依赖 `react`、`ReactDOM`、`antd`、`@ant-design/icons`，如果你需要其他的外部依赖，可以在你的 webpack 配置文件中加入你所需要的 `externals`
## API
### Methods
| 属性 | 说明 | 入参 | 版本 |
| ---------- | ------------------ | ------------------------------------------------------------ | ----- |
| WarpUmd | 组件包裹器 | 参数一，`RC`，React 组件
参数二，`options`，object
`name`，插件名称，string
`parser`，自定义插件处理函数(**必须设置返回值object**)，默认返回传入的参数，function
参数三，`propsDefines`，插件接收的入参，object
（后续版本会对入参每个元素的值进行优化） | 0.1.0 |
| FormParser | 内置表单元素处理器 | - | 0.1.0 |
## 关于rc2plugin的开发、维护与测试
1. `test` 目录可以进行测试，你可以按照上述文档中**包装组件**的说明，在 `test/rc2plugin.js` 转换你所需要测试的React组件；
2. `test/index.js` 可以按照上述文档中**使用插件**的说明来使用插件；
3. 如果你需要其他cdn文件，你可以在这里找 [cdnjs](https://cdnjs.com/)、[jsdelivr](https://www.jsdelivr.com/)、[unpkg](https://unpkg.com/)，然后修改 `webpack-config/webpack.config.dev.js` 的 `externals` 即可；
4. `npm run start` 进行测试