# 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` 进行测试