Question

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

Alghough我想键入JSX标签作为VNode，flowtype引擎将JSX标签检测为React $ Element，因此它不起作用。

是否有人知道如何让流式引擎检测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
// @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;

如何用React $ Element和flowtype键入其他类型的JSX？

1 个答案: