组件复用

发表于 分类于 本文字数： 2.3k 阅读时长 ≈ 2 分钟

组件复用

antd 组件复用示例

如图所示，在内容管理路由组件和发布文章组件都有Select选择器

1

2

将该功能单独封装成组件，复用的组件应当完善和健壮。
这个组件是From表单的受控组件。
antd的自定义表单控件的说明From
说明：
自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
1.提供受控属性 value 或其它与 valuePropName 的值同名的属性
2.提供 onChange 事件或 trigger 的值同名的事件。

From表单

1
2
3
4
5
6
7
8
9
10
11
12
// pages/Article/index.js
import { Channels } from '@/components/Channels'
export default function Article() {
    ...
    return(
        <Form>
            <Form.Item label="频道：" name="channel_id">
                <Channels/>
            </Form.Item>
        </Form>
    )
}

复用的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// components/Channels
import { Select } from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels } from '@/store/actions'

//不是受控组件
export const Channels = ({ ...rest }) => {		// 接收到表单的参数
  console.log(rest)		// {value: undefined, id: 'channel_id', onChange: ƒ}	更换频道也拿不到当前值
  const dispatch = useDispatch()
  const { channels } = useSelector((value) => value.article)
  useEffect(() => {
    dispatch(getChannels())		//分发获取参数的状态
  }, [dispatch])
  return (
    <Select
      placeholder="请选择文章频道"
    >
      {channels.map((items) => (
        <Select.Option key={items.id} value={items.id}>
          {items.name}
        </Select.Option>
      ))}
    </Select>
  )
}

// 改为受控组件，给Select组件添加value，onChange属性,width是自定义参数，可以自定义样式
export const Channels = ({ value,onChange,width }) => {
  const dispatch = useDispatch()
  const { channels } = useSelector((value) => value.article)
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])
  return (
    <Select
      style={
        {
          width,
        }
      }
      placeholder="请选择文章频道"
      value={value}		// 指定当前选中的条目
      onChange={onChange}	//选中 option，或 input 的 value 变化时，调用此函数
    >
      {channels.map((items) => (
        <Select.Option key={items.id} value={items.id}>
          {items.name}
        </Select.Option>
      ))}
    </Select>
  )
}

最后在两个路由组件引入组件就行了

1
2
3
4
5
6
7
8
9
10
11
import { Channels } from '@/components/Channels'
export default function Article() {
    ...
    return(
        <Form>
            <Form.Item label="频道：" name="channel_id">
                <Channels width={xxx}/>
            </Form.Item>
        </Form>
    )
}