Implementing the link component
7uzetpgm1#
开发组件时,对于propTypes有个疑问,源码和相关文档中写到propTypes是为了让omi知道内部怎么解析传入的字符串。
const attrs = this.constructor.propTypes if (!attrs) return Object.keys(attrs).forEach(key => { const type = attrs[key] const val = ele.getAttribute(hyphenate(key)) if (val !== null) { switch (type) { case String: ele.props[key] = val break case Number: ele.props[key] = Number(val) break case Boolean: if (val === 'false' || val === '0') { ele.props[key] = false } else { ele.props[key] = true } break case Array: case Object: if (val[0] === ':') { ele.props[key] = getValByPath(val.substr(1), Omi.$) } else { try { ele.props[key] = JSON.parse(val) } catch (e) { console.warn( `The ${key} object prop does not comply with the JSON specification, the incorrect string is [${val}].` ) } } break } } else { if ( ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key) ) { ele.props[key] = ele.constructor.defaultProps[key] } else { ele.props[key] = null } } })
支持的propTypes为String/Number/Boolean/Array/Object,不支持传递Function,这部分是不是需要重新添加相关逻辑?例如link组件的onClick属性,参考来自https://github.com/Tencent/tdesign-react/blob/develop/src/link/type.ts#L63
/** * 点击事件,禁用状态不会触发点击事件 */ onClick?: (e: MouseEvent<HTMLAnchorElement>) => void; }
@ChelesteWang@dntzhang
js5cn81o2#
不用吧。 web components 本身就可以绑定事件,而且在 html 中直接写事件的 attr 也是 字符串类型
envsm3lx3#
好的,感谢解答
3条答案
按热度按时间7uzetpgm1#
开发组件时,对于propTypes有个疑问,源码和相关文档中写到propTypes是为了让omi知道内部怎么解析传入的字符串。
支持的propTypes为String/Number/Boolean/Array/Object,不支持传递Function,这部分是不是需要重新添加相关逻辑?
例如link组件的onClick属性,参考来自https://github.com/Tencent/tdesign-react/blob/develop/src/link/type.ts#L63
@ChelesteWang@dntzhang
js5cn81o2#
不用吧。 web components 本身就可以绑定事件,而且在 html 中直接写事件的 attr 也是 字符串类型
envsm3lx3#
不用吧。 web components 本身就可以绑定事件,而且在 html 中直接写事件的 attr 也是 字符串类型
好的,感谢解答