2021-03-18 15:51:25 +08:00
|
|
|
|
<!--anchor:on-->
|
|
|
|
|
|
|
|
|
|
|
|
# JSX & TSX
|
|
|
|
|
|
|
|
|
|
|
|
## 启用 JSX & TSX
|
|
|
|
|
|
|
|
|
|
|
|
关于启用 JSX 和 TSX，请参考你使用的工具链的相关文档。
|
|
|
|
|
|
|
|
|
|
|
|
## 使用组件
|
|
|
|
|
|
|
|
|
|
|
|
在 JSX 中，推荐以直接引入的形式使用组件。
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
|
import { NButton } from 'naive-ui'
|
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
|
render () {
|
|
|
|
|
|
return <NButton>{{ default: () => 'Star Kirby' }}</NButton>
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-04-06 00:17:14 +08:00
|
|
|
|
## 形如 @update:\* 的 prop
|
2021-03-18 15:51:25 +08:00
|
|
|
|
|
|
|
|
|
|
naive-ui 中，所有形如 `on-update:*` 的 prop 都有一个对应的 `onUpdate*` 属性可供使用（由于 JSX 自身的规定，`onUpdate:*` 不是一个合法的 prop）。
|
|
|
|
|
|
|
|
|
|
|
|
如果你发现没有，那一定是我忘了写了，请提交一个 Issue 或者 PR。
|
|
|
|
|
|
|
|
|
|
|
|
例如，在模板中 `<n-select @update:value="..." />` 在 JSX 中可以写为 `<NSelect onUpdateValue={...} />`。
|
