React 高阶组件 Props 代理的一些小技巧

aweiu

2020-12-13

编程

高阶组件的 Props 代理有一些很常见的场景：

那么在下面这个操作之前：

1	<RawComponent {...props} />

你是否会先对 props 做一些「编辑」操作呢？比如删除某些属性，赋值某些属性。

其实大部分时候可以先这样去解构你的高阶组件 Props：

1	const { newProp1, newProp2, ...rawProps } = props

如果是 ts 项目一般还可以配合：

Omit<原组件 PropsType, ‘rawPropX’> 来移除掉不希望被用户传入的 prop

然后在使用的时候还可以利用属性顺序技巧来实现默认值或覆盖值：

1	<RawComponent rawProp1="默认值" {...rawProps} rawPropX="覆盖值" />

子属性也类似：

<RawComponent
  xxProps={{
    rawProp1: '默认值',
    ...rawProps,
    rawPropX: '覆盖值',
  }}
/>

以上大部分场景就不需要专门从 props 里 delete 某属性了。即使真的需要，也是建议通过 lodash 的 omit 或 pick 来做。

顺便，业务逻辑之外的很多代码都建议先从项目已经提供的通用库里去找下，一般都不建议自己造轮子。