React中'List'无法作为JSX元素使用的问题排查与解决

问题背景 #

将React组件从Node.js 8环境升级到Node.js 13并启用TypeScript后，FilterBar组件构建失败，报错信息为：'List' cannot be used as a JSX Element。相关组件代码如下：

FilterBar组件错误片段（filterbar.tsx） #

renderResultList = (resultList): JSX.Element => {
  let listProps = {
    ref: list => this.list = list,
    onClickOutside: this.handleClickOutside,
    onCancel: this.handleOnEscape,
  }

  if (resultList && resultList.length > 0) {
    // 错误：Fragment语法存在多余括号
    return <>{
--->      <List itemCount={resultList.length} onEnter={this.handleOnEnter} {...listProps}>
          {resultList.map((item, index) => {
            // 错误：Fragment语法存在多余括号
            return <>{
                <ListItem
                  key={item[this.props.valueField]}
                  onClick={this.handleItemSelection.bind(this, item)}
                >
                  {item[this.props.displayField]}
                </ListItem>
            )} // 多余的右括号
            </>

          })}
        </List>
    )} // 多余的右括号
    </>
  }

  return <>{
    <>
 --->   <List {...listProps}>
        <ListItem className="filterbar-no-data">Veri bulunamadı.</ListItem>
      </List>
    </>

  )} // 多余的右括号
  </>
}

List组件代码（list.tsx） #

render() {
  // 错误：Fragment语法存在多余括号
  return <>{
      <Element
        ref={list => this.list = list}
        tabIndex="0"
        type='ul'
        className='filterbar-list'
        onKeyDown={this.handleKeyDown}
      >
        {React.Children.map(this.props.children, (child, index) => {
          // 错误：Fragment语法存在多余括号
          return <>{
            (React.cloneElement(child, {
            index: index,
            onFocus: this.handleFocus,
            isFocused: this.state.focusIndex === index,
            isScroll: this.state.isScroll,
          }))}</>
        })}
      </Element>
  )} // 多余的右括号
  </>
}

ListItem组件代码（listitem.tsx） #

render() {
  let { children, index, className, isFocused } = this.props
  // 错误：Fragment语法存在多余括号
  return <>{
    <Element
      type='li'
      onMouseEnter={this.handleFocus.bind(this, index)}
      onClick={this.props.onClick}
      className={classNames('filterbar-list-item', className, { 'focused': isFocused })}
    >
      {children}
    </Element>
  )} // 多余的右括号
  </>
}

已尝试移除package.json的resolutions、额外包裹Fragment、调整TypeScript版本，均未解决问题。

错误根源 #

1. Fragment语法错误：所有组件的render方法中，JSX Fragment存在多余的右括号（)），比如<>{ ... )}</>的写法不符合JSX规范。Node.js 8环境下的Babel可能对语法错误容忍度较高，但TypeScript在严格模式下会将这种无效结构识别为非JSX元素，从而误报List无法作为JSX元素使用。
2. 组件类型缺失：List/ListItem组件未添加TypeScript类型声明，TS无法确认这些组件是合法的React组件类型。
3. 导入导出不匹配：可能存在List组件的导出方式与FilterBar中的导入方式不一致（比如默认导出用了命名导入），导致TS无法识别组件类型。

解决方案 #

1. 修复Fragment语法错误 #

将所有组件中多余的括号移除，正确的Fragment语法为<>{ ... }</>，示例修改如下：

FilterBar中renderResultList的正确写法：

if (resultList && resultList.length > 0) {
  return (
    <>
      <List itemCount={resultList.length} onEnter={this.handleOnEnter} {...listProps}>
        {resultList.map((item, index) => (
          <ListItem
            key={item[this.props.valueField]}
            onClick={this.handleItemSelection.bind(this, item)}
          >
            {item[this.props.displayField]}
          </ListItem>
        ))}
      </List>
    </>
  );
}

return (
  <>
    <List {...listProps}>
      <ListItem className="filterbar-no-data">Veri bulunamadı.</ListItem>
    </List>
  </>
);

List组件render的正确写法：

render() {
  return (
    <Element
      ref={list => this.list = list}
      tabIndex="0"
      type='ul'
      className='filterbar-list'
      onKeyDown={this.handleKeyDown}
    >
      {React.Children.map(this.props.children, (child, index) =>
        React.cloneElement(child as React.ReactElement, {
          index: index,
          onFocus: this.handleFocus,
          isFocused: this.state.focusIndex === index,
          isScroll: this.state.isScroll,
        })
      )}
    </Element>
  );
}

ListItem组件render的正确写法：

render() {
  let { children, index, className, isFocused } = this.props
  return (
    <Element
      type='li'
      onMouseEnter={this.handleFocus.bind(this, index)}
      onClick={this.props.onClick}
      className={classNames('filterbar-list-item', className, { 'focused': isFocused })}
    >
      {children}
    </Element>
  );
}

2. 添加TypeScript类型声明 #

为List和ListItem组件定义Props和State类型，并继承React.Component：

List组件类型声明示例：

import React, { Component } from 'react';

// 定义List组件的Props类型
interface ListProps {
  itemCount?: number;
  onEnter?: () => void;
  onClickOutside?: () => void;
  onCancel?: () => void;
  children?: React.ReactNode;
}

// 定义List组件的State类型
interface ListState {
  focusIndex: number;
  isScroll: boolean;
}

class List extends Component<ListProps, ListState> {
  // 初始化State
  state: ListState = {
    focusIndex: 0,
    isScroll: false,
  };

  // 组件逻辑方法...
  handleKeyDown = (e: React.KeyboardEvent) => {
    // 实现逻辑
  };

  handleFocus = (index: number) => {
    // 实现逻辑
  };

  render() {
    // 已修复的render代码...
  }
}

export default List; // 确保导出方式与导入一致

3. 确认导入导出匹配 #

如果List组件是默认导出（export default List），则FilterBar中需用默认导入：

import List from './list';
import ListItem from './listitem';

如果是命名导出（export const List），则用命名导入：

import { List, ListItem } from './components';

4. 同步React与@types/react版本 #

确保package.json中react和@types/react的版本一致，避免类型不兼容：

{
  "dependencies": {
    "react": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.2",
    "typescript": "^4.5.5"
  }
}

5. 检查TypeScript配置 #

确保tsconfig.json中的JSX配置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+推荐使用，React 16用"react"
    "strict": true,
    "esModuleInterop": true
  }
}

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