vue.js - 如何使用 flowtype 以外的 React$Element 类型键入 JSX？

Question

我将 flowtype 与 Vue.js 一起使用，并为 Vue.js 添加了类型声明。然后，我还将 JSX 语法与 babel-plugin-transform-vue-jsx 一起使用。

虽然我想输入 JSX 标签作为 VNode，flowtype 引擎将 JSX 标签检测为 React$Element，所以它不起作用。

有没有人知道如何让 flowtype 引擎将 JSX 检测为另一种类型，或者知道解决此问题的其他好方法？

我需要你的帮助。

谢谢。

完整代码在这里。 https://github.com/kentrino/vue-js-webpack-flowtype-example

import style from './Test.css';

const test: ComponentOptions = {
  render (h): VNode {
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div>
//          ^^^^^ React$Element. This type is incompatible with
//            5:   render (h: any): VNode {
//                                  ^^^^^ VNode
  },
  name: 'Test'
}

Answer 1

你可以让 Flow 使用 React 以外的东西来检查你的 JSX。只需将 @jsx 标记放在文件的顶部(我将我的标记放在 flow 标记的正下方)

// @flow
// @jsx somethingBesidesReact.createElement

在你的例子中，你正在使用 Vue 和 babel-plugin-transform-vue-jsx 插件来转换你的 JSX，它简单地转换为 h

https://github.com/vuejs/babel-plugin-transform-vue-jsx

所以，在你的情况下，这应该可行

// @flow
// @jsx h
import style from './Test.css';

const test: ComponentOptions = {
  render (h: any): VNode {
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div>
  },
  name: 'Test'
}

export default test;