Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: TDesign link component #775

Open
GuYith opened this issue Aug 9, 2023 · 3 comments
Open

feature: TDesign link component #775

GuYith opened this issue Aug 9, 2023 · 3 comments

Comments

@GuYith
Copy link
Contributor

GuYith commented Aug 9, 2023

Implementing the link component

@GuYith
Copy link
Contributor Author

GuYith commented Aug 10, 2023

开发组件时,对于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

@dntzhang
Copy link
Collaborator

不用吧。 web components 本身就可以绑定事件,而且在 html 中直接写事件的 attr 也是 字符串类型

@GuYith
Copy link
Contributor Author

GuYith commented Aug 10, 2023

不用吧。 web components 本身就可以绑定事件,而且在 html 中直接写事件的 attr 也是 字符串类型

好的,感谢解答

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants