[问题] 如何给小程序内置组件传入新定义的属性

[rikumi]

问题描述
目前 Remax 编译到微信小程序可以支持 QQ 小程序，但 QQ 小程序中对一些组件有不同于微信小程序的新增属性，例如 <button> 的 share-type 和 share-mode （参考文档）。

在 Remax 中如何支持传这些新增参数？截图中这样使用似乎不起作用，目前只想到直接用 createHostComponent，但不知道这样覆盖定义组件会不会带来一些副作用。

像自己定义新增组件一样，给已有组件定义新增属性也是常见需求之一，如果有解决方案，也希望在文档中给出相关指引。

示例代码

[rikumi]

尝试了 createHostComponent，新增的属性并没有出现，仍然是 remax/wechat 原有的 Button 组件的属性列表：

[yesmeck]

@rikumi 直接给我们 PR 吧

[yesmeck]

https://github.com/remaxjs/remax/blob/master/packages/remax-wechat/src/hostComponents/Button/index.ts
https://github.com/remaxjs/remax/blob/master/packages/remax-wechat/src/hostComponents/Button/node.ts

主要在这两个文件

[rikumi]

ok，我一会加下

[rikumi]

PR 之外还是需要讨论一下允许扩展内置组件的可行性，目前的行为是在代码里通过 createHostComponent 来扩展已经存在的内置组件，在 base.wxml 中看不到对应的输出，被去重了。

比较 Hack 的方式是在组件名字后面加一个空格：createHostComponent('button ', ...)，让 base.wxml 中 template 的名字产生区分，但同样使用小程序的 button 组件，但这样显然会降低业务代码可读性，且可能随着 Remax 的更新而带来问题：

[yesmeck]

我们现在其实有一个接口允许注册一个新组件 https://remaxjs.org/api/remax-macro#createhostcomponentname-props

如果要新增或者覆盖属性的话是不是可以新增一个类似的 extendHostComponent 接口。

[yesmeck]

@rikumi 不好意思，贴错地址了，已更新。

[yesmeck]

🤔 这个样子：

import { extendHostComponent } from 'remax/macro';

const Button = extendHostComponent('button', (props) => {
  props.push(['openType', 'open-type']); // add a new props;
  return props;
})

<Button openType="foo">click me</Button>

[rikumi]

上面已经提到 createHostComponent 的问题，根源在于 封装的小程序组件和模板名字必须一致，而模板名字又是不可重复的。有三种可行的方案来解决它：

1. 按你的思路新增一个 extendHostComponent 接口；
2. 允许 createHostComponent 中自定义模板名称，以便防止与现有的模板重复，同时又能和现有的模板封装同一个小程序组件；
3. 在构建中检测到 createHostComponent 尝试重复封装小程序组件的情况，并且自动为这些重复封装的模板分配顺序编号（如 button-1）。

[rikumi]

还有一种思路是单独用一个 wxml 来存放用户自定义的组件，但从代码看来 Remax 自带的组件也在调用 createHostComponent，可能就不好区分了。

[yesmeck]

如果基于 createHostComponent 改造的话，新增属性时还要把其他已有的属性列出来，感觉会比较繁琐。

[rikumi]

如果基于 createHostComponent 改造的话，新增属性时还要把其他已有的属性列出来，感觉会比较繁琐。

忽略了这点 😂 确实是这样，那就按你的思路来做就可以。

[yesmeck]

不过想想这个接口使用场景比较小，作为 Remax 的维护者来说是希望组件的新属性能更新到 Remax 上的，而不是让开发者自己去玩。

[rikumi]

作为使用者来说，假如我某一天拿到了一个内部接口，那就只有自己 fork 自己发布了。

[yesmeck]

🤷‍♂️ 看来大家都有私货， @rikumi 来个 PR 吧。

[rikumi]

现在暂时没有 😅