forked from opentiny/tiny-vue
feat(react): 添加贡献文档，readme 改名为 README (#538)
This commit is contained in:
Mr.栋
GitHub
parent
0768ce22ab
commit
b7e730f3d3
|
|
@ -0,0 +1,128 @@
|
|||
# 如何贡献一个 react 组建
|
||||
|
||||
对于 vue 已有的组件，全新的组件，建议先实现 vue 组件，再去适配 react 模版。
|
||||
因为 vue 和 react 共用同一套 renderless 目录底下的逻辑，renderless 中的逻辑，vue 侧是基于 vue 自身的，react 侧则是基于 react 模拟 vue api 的适配层的。所以，先用 vue 的思维实现 vue 组件，是比较可靠的。
|
||||
|
||||
## 开发
|
||||
|
||||
假如要实现的组件是 button
|
||||
1. 在 packages/react/src 底下创建如下目录
|
||||
|
||||
```js
|
||||
button
|
||||
/node_modules
|
||||
/src
|
||||
/index.ts
|
||||
/pc.tsx
|
||||
/mobile.tsx
|
||||
/mobile-first.ts
|
||||
/index.ts
|
||||
/package.json
|
||||
```
|
||||
|
||||
2. 给 package.json 中添加相关依赖
|
||||
|
||||
```json
|
||||
"dependencies": {
|
||||
"@opentiny/vue-renderless": "workspace:~", // 必选
|
||||
"@opentiny/react-common": "workspace:~", // 必选
|
||||
"@opentiny/react-icon": "workspace:~", // 组件需用用 icon，从这里引入
|
||||
"@opentiny/vue-theme": "workspace:~" // 必须，组件的样式一般在这里定义
|
||||
}
|
||||
```
|
||||
|
||||
3. 创建 pc.tsx/mobile.tsx/mobile-first.tsx，并实现组件模版
|
||||
|
||||
```tsx
|
||||
import { renderless, api } from '@opentiny/vue-renderless/button/vue'
|
||||
import { useSetup } from '@opentiny/react-common'
|
||||
import '@opentiny/vue-theme/button/index.less'
|
||||
|
||||
export default function Button(props) {
|
||||
const {
|
||||
circle, // 解析出一个属性，api 事先定义的
|
||||
type = 'default', // 解析出一个属性，有默认值
|
||||
} = props
|
||||
|
||||
const defaultProps = Object.assign({
|
||||
type
|
||||
}, props) // 合并默认值属性
|
||||
|
||||
const {
|
||||
ref,
|
||||
parent,
|
||||
current: vm
|
||||
} = useVm() // 生成 vm 和 parent 对象，给 useSetup 提供 vm、parent 对象
|
||||
// ref 是用来获取组件根部 dom ，进而获取 fiber 节点
|
||||
|
||||
const {
|
||||
handleClick, // 从 renderless/**/button/index.ts 里定义的事件，会在 button/vue.ts
|
||||
state,
|
||||
a
|
||||
} = useSetup({
|
||||
props: defaultProps,
|
||||
renderless,
|
||||
api,
|
||||
vm,
|
||||
parent
|
||||
}) // 通过 useSetup 函数抹平差异并执行组件核心逻辑 renderless 函数
|
||||
// renderless 函数是通过 vue api 实现的组件逻辑
|
||||
// useSetup 中给 renderless 函数提供了模拟后的 api
|
||||
|
||||
const $attrs = a(props, define_props, false)
|
||||
// 过滤没有在组件上定义，但是传入的属性
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref} // 通过 ref 获取组件根部 dom，进而获取 fiber 节点
|
||||
onClick={handleClick} // 绑定时间监听器
|
||||
>
|
||||
{state.data} // 在模版中使用状态数据
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
4. 创建多模版模式组建
|
||||
|
||||
button/src/index.ts
|
||||
```jsx
|
||||
import pc from './pc.jsx'
|
||||
import mobile from './mobile.jsx'
|
||||
import mobileFirst from './mobile-first.jsx'
|
||||
|
||||
export default function (props) {
|
||||
const {
|
||||
tiny_mode = 'pc'
|
||||
} = props
|
||||
|
||||
const S = ({
|
||||
pc,
|
||||
mobile,
|
||||
'mobile-first': mobileFirst
|
||||
})[tiny_mode]
|
||||
|
||||
return (S(props))
|
||||
}
|
||||
```
|
||||
|
||||
5. 创建组建入口
|
||||
button/index.ts
|
||||
```jsx
|
||||
import Button from './src'
|
||||
|
||||
export default Button
|
||||
```
|
||||
|
||||
## 开发一个 react-icon 组件
|
||||
|
||||
在 packages/react-icon/src 下创建 iconName 目录
|
||||
中创建 index.ts 组件，内容如下：
|
||||
|
||||
```ts
|
||||
import { Svg } from '@opentiny/react-common'
|
||||
import { ReactComponent as Check } from '@opentiny/vue-theme/svgs/check.svg'
|
||||
|
||||
export default Svg({ name: 'Check', component: Check })
|
||||
```
|
||||
|
|
@ -126,135 +126,6 @@ packages/react-common
|
|||
/vue-hooks.js 用户模拟 vue 的钩子函数
|
||||
```
|
||||
|
||||
# 如何贡献一个 react 组建
|
||||
|
||||
对于 vue 已有的组件，全新的组件，建议先实现 vue 组件，再去适配 react 模版。
|
||||
因为 vue 和 react 共用同一套 renderless 目录底下的逻辑，renderless 中的逻辑，vue 侧是基于 vue 自身的，react 侧则是基于 react 模拟 vue api 的适配层的。所以，先用 vue 的思维实现 vue 组件，是比较可靠的。
|
||||
|
||||
## 开发
|
||||
|
||||
假如要实现的组件是 button
|
||||
1. 在 packages/react/src 底下创建如下目录
|
||||
|
||||
```js
|
||||
button
|
||||
/node_modules
|
||||
/src
|
||||
/index.ts
|
||||
/pc.tsx
|
||||
/mobile.tsx
|
||||
/mobile-first.ts
|
||||
/index.ts
|
||||
/package.json
|
||||
```
|
||||
|
||||
2. 给 package.json 中添加相关依赖
|
||||
|
||||
```json
|
||||
"dependencies": {
|
||||
"@opentiny/vue-renderless": "workspace:~", // 必选
|
||||
"@opentiny/react-common": "workspace:~", // 必选
|
||||
"@opentiny/react-icon": "workspace:~", // 组件需用用 icon，从这里引入
|
||||
"@opentiny/vue-theme": "workspace:~" // 必须，组件的样式一般在这里定义
|
||||
}
|
||||
```
|
||||
|
||||
3. 创建 pc.tsx/mobile.tsx/mobile-first.tsx，并实现组件模版
|
||||
|
||||
```tsx
|
||||
import { renderless, api } from '@opentiny/vue-renderless/button/vue'
|
||||
import { useSetup } from '@opentiny/react-common'
|
||||
import '@opentiny/vue-theme/button/index.less'
|
||||
|
||||
export default function Button(props) {
|
||||
const {
|
||||
circle, // 解析出一个属性，api 事先定义的
|
||||
type = 'default', // 解析出一个属性，有默认值
|
||||
} = props
|
||||
|
||||
const defaultProps = Object.assign({
|
||||
type
|
||||
}, props) // 合并默认值属性
|
||||
|
||||
const {
|
||||
ref,
|
||||
parent,
|
||||
current: vm
|
||||
} = useVm() // 生成 vm 和 parent 对象，给 useSetup 提供 vm、parent 对象
|
||||
// ref 是用来获取组件根部 dom ，进而获取 fiber 节点
|
||||
|
||||
const {
|
||||
handleClick, // 从 renderless/**/button/index.ts 里定义的事件，会在 button/vue.ts
|
||||
state,
|
||||
a
|
||||
} = useSetup({
|
||||
props: defaultProps,
|
||||
renderless,
|
||||
api,
|
||||
vm,
|
||||
parent
|
||||
}) // 通过 useSetup 函数抹平差异并执行组件核心逻辑 renderless 函数
|
||||
// renderless 函数是通过 vue api 实现的组件逻辑
|
||||
// useSetup 中给 renderless 函数提供了模拟后的 api
|
||||
|
||||
const $attrs = a(props, define_props, false)
|
||||
// 过滤没有在组件上定义，但是传入的属性
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref} // 通过 ref 获取组件根部 dom，进而获取 fiber 节点
|
||||
onClick={handleClick} // 绑定时间监听器
|
||||
>
|
||||
{state.data} // 在模版中使用状态数据
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
4. 创建多模版模式组建
|
||||
|
||||
button/src/index.ts
|
||||
```jsx
|
||||
import pc from './pc.jsx'
|
||||
import mobile from './mobile.jsx'
|
||||
import mobileFirst from './mobile-first.jsx'
|
||||
|
||||
export default function (props) {
|
||||
const {
|
||||
tiny_mode = 'pc'
|
||||
} = props
|
||||
|
||||
const S = ({
|
||||
pc,
|
||||
mobile,
|
||||
'mobile-first': mobileFirst
|
||||
})[tiny_mode]
|
||||
|
||||
return (S(props))
|
||||
}
|
||||
```
|
||||
|
||||
5. 创建组建入口
|
||||
button/index.ts
|
||||
```jsx
|
||||
import Button from './src'
|
||||
|
||||
export default Button
|
||||
```
|
||||
|
||||
## 开发一个 react-icon 组件
|
||||
|
||||
在 packages/react-icon/src 下创建 iconName 目录
|
||||
中创建 index.ts 组件，内容如下：
|
||||
|
||||
```ts
|
||||
import { Svg } from '@opentiny/react-common'
|
||||
import { ReactComponent as Check } from '@opentiny/vue-theme/svgs/check.svg'
|
||||
|
||||
export default Svg({ name: 'Check', component: Check })
|
||||
```
|
||||
|
||||
# 用户使用文档
|
||||
|
||||
## 在项目中使用所有组件
|
||||
Loading…
Reference in New Issue