VS2017中使用React/TypeScript Fragment时出现元素类型无效错误

嘿，这个问题我之前踩过坑！你碰到的NodeInvocationException错误，核心原因是TypeScript 2.6.2对React Fragment的短语法<>支持不完善——虽然React 16.3本身已经支持Fragment，但老版本的TS无法正确解析这个语法糖，编译后把<>识别成了一个无效的symbol类型，自然不符合React对元素类型的要求了。

给你两个可行的解决方案：

方案1：改用显式的<React.Fragment>语法 #

这是最直接的临时解决办法，不需要升级依赖。只要把短语法替换成完整的React.Fragment标签就行，TS 2.6.2能正确识别这个写法：

import React from 'react'; // 务必确保引入React

public render() { 
  return ( 
    <React.Fragment> 
      Some text. 
      <h2>A heading</h2> 
      More text. 
      <h2>Another heading</h2> 
      Even more text. 
    </React.Fragment> 
  ) 
}

方案2：升级TypeScript版本 #

如果项目允许的话，更彻底的解决方式是把TypeScript升级到2.8及以上版本——TS从2.8开始才正式完善了对JSX Fragment短语法的支持，升级后你就能正常使用<>语法了。

升级可以通过npm命令操作：

npm install typescript@^2.8.0 --save-dev

要是你用的是VS2017的NuGet包管理，也可以在项目里直接更新TypeScript的NuGet包到对应版本。

补充说明 #

React 16.3本身是完全支持Fragment（包括短语法）的，问题出在TS版本的兼容性上。老版本的TS无法将<>映射到React.Fragment，反而把它当成了未知的symbol类型，这才触发了那个“元素类型无效”的错误。

内容的提问来源于stack exchange，提问作者Orion