如何使用流类型的 React$Element 以外的其他类型键入 JSX？答案

【问题标题】：How to type JSX with other types than React$Element with flowtype?如何使用流类型的 React$Element 以外的其他类型键入 JSX？
【发布时间】：2017-02-03 09:47:14
【问题描述】：

我在 Vue.js 中使用 flowtype，并为 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'
}

【问题讨论】：

我即将尝试做同样的事情......（将 flowtype 和 JSX 与 React 以外的库一起使用）我会让你知道我发现了什么......但是缺乏这里的答案意味着它可能不适合我们...

标签： vue.js jsx flowtype

【解决方案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;

【讨论】：

非常感谢！