diff --git a/tutorial/pass-complex-type-props-to-custom-elements.cn.md b/tutorial/pass-complex-type-props-to-custom-elements.cn.md index bf56f5329..9701df54a 100644 --- a/tutorial/pass-complex-type-props-to-custom-elements.cn.md +++ b/tutorial/pass-complex-type-props-to-custom-elements.cn.md @@ -30,6 +30,103 @@ define('my-ele', class extends WeElement { ``` -直接传入 json 字符串, +直接传入 json 字符串,omi 内部会将其 `JSON.parse` 转成 object 类型。 +## 方式二 + +如果你不想写一大堆字符串在 html 标签上,可以使用下面的方式: + +```html + + + +``` + +当然也是支持 path: + +```html + + + + +``` + + + + +## 传递 false 给自定义元素 + +HTML 有个设计缺陷,就是你无法传递 false 给 attr 该元素,当该 attr 默认值是 true 的时候。比如: + +```js +define('my-element', class extends WeElement { + static defaultProps = { + show: true + } + + static propTypes = { + show: Boolean + } + + render(props) { + ... + ... + } +}) +``` + +使用 Omi,你可以通过 false 字符串或者 0 字符串搞定: + +```html + +``` + +或 + +```html + +``` + +## 原理 + +可以看 [→Omi 源码](https://github.com/Tencent/omi/blob/master/packages/omi/src/we-element.js#L179-L197): + +```js + 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 { + ele.props[key] = JSON.parse(val + .replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4') + .replace(/'([\s\S]*?)'/g, '"$1"') + .replace(/,(\s*})/g, '$1') + ) + } + break +``` + +这里可以看到,omi 内部还会对 josn 格式进行处理,防止 `JSON.parse` 出错。当然 eval 和 new Function 可以转化错误格式的 json 字符串,但是考虑到安全性,还是使用`JSON.parse` 。 + + +## Links + +* [Omi](https://github.com/Tencent/omi) +* [omijs.org](https://dntzhang.github.io/omi.html) \ No newline at end of file diff --git a/tutorial/pass-complex-type-props-to-custom-elements.md b/tutorial/pass-complex-type-props-to-custom-elements.md index 52304abe8..2aae9b4e6 100644 --- a/tutorial/pass-complex-type-props-to-custom-elements.md +++ b/tutorial/pass-complex-type-props-to-custom-elements.md @@ -1,2 +1,33 @@ # Pass complex type props to custom elements of web components + + +You can set boolean prop to false from markup by 0 or false string + +```js +define('my-element', class extends WeElement { + static defaultProps = { + show: true + } + + static propTypes = { + show: Boolean + } + + render(props) { + ... + ... + } +}) +``` + +Use: + +```html + +``` + +or + +```html + \ No newline at end of file