React使用PerfectScrollbar导致页面崩溃 报JSX组件类型无效错误

核心报错 #

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
报错释义：JSX解析到的组件类型无效，预期为内置组件对应的字符串、或复合组件对应的类/函数，但实际获取到undefined，通常由组件未正确导出、或混淆默认导入与命名导入写法导致。

问题1：组件导入错误（直接触发当前undefined报错） #

目前社区通用的react-perfect-scrollbar为默认导出，混用命名导入会直接导致组件值为undefined，触发上述报错：

• 错误写法（命名导入，拿到undefined）：

import { PerfectScrollbar } from 'react-perfect-scrollbar'

• 正确写法（默认导入+引入必填样式）：

import PerfectScrollbar from 'react-perfect-scrollbar'
import 'react-perfect-scrollbar/dist/css/styles.css'

如果使用的是其他二次封装的PerfectScrollbar组件，先确认对应包的导出规则，不要混用默认/命名导入。

问题2：组件使用逻辑错误（修完导入后仍会出现功能异常） #

现有代码把PerfectScrollbar写在了allMemberList.data.map循环内部，会为每一个列表项单独生成一个滚动容器，既不符合滚动组件的使用逻辑，还会造成严重的渲染性能浪费。同时代码中存在React语法问题：原生DOM的class属性需要替换为React要求的驼峰写法className，map渲染列表项必须添加唯一key。

修正后可直接参考的代码 #

<div>
  {allMemberList !== null && !loadingAllMemberList && (
    {/* 滚动容器只渲染一次，包裹整个列表 */}
    <PerfectScrollbar className="card-body dz-scroll" style={{ height: '400px' }}>
      <ul className="list-group list-group-flush">
        {allMemberList.data.map(item => (
          <li className="list-group-item p-3 py-2" key={item.user.id}> 
            <img 
              className='img-responsive'
              src={item.user.photo_url} 
              alt={item.user.display_name}
            /> 
            <span className='text-center ml-3'>{item.user.display_name}</span>
            <span className='font-weight-light ml-2'>{item.user.username}</span>
          </li>
        ))}
      </ul>
    </PerfectScrollbar>
  )}
</div>

额外注意项 #

• PerfectScrollbar 必须设置固定高度才会生效，可根据业务场景调整高度值
• 列表项的key必须使用数据唯一标识（比如用户id），不要使用数组下标，避免列表更新时出现渲染错位
• 图片标签建议补充有意义的alt属性，提升可访问性

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