React开发JBrowse2插件：下拉菜单添加图标报错求助

问题背景 #

我正在开发基于React.js的JBrowse2应用，采用jbrowse-react-linear-genome-view构建工具。JBrowse2支持开发「插件」，以下是一个本地定义插件的示例——直接在生成JBrowse会话的位置定义，用于在高亮区域时触发，为HighlightRegion功能添加额外下拉选项。

我的需求是给这个自定义下拉选项添加图标，使其外观与JBrowse2默认选项一致。但尝试在rubberBandMenuItems中添加icon键值对时触发错误，错误信息如下。

原插件代码 #

// 我称这个小型类为“本地定义”插件
class HighlightRegionPlugin extends Plugin {
    name = "HighlightRegionPlugin"

    install(pluginManager) {
    pluginManager.addToExtensionPoint(
        "Core-extendPluggableElement",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        pluggableElement => {
            if (pluggableElement.name === "LinearGenomeView") {
                const { stateModel } = pluggableElement
                const newStateModel = stateModel.extend(self => {
                    const superRubberBandMenuItems = self.rubberBandMenuItems
                    return {
                        views: {
                            rubberBandMenuItems() {
                                return [
                                    ...superRubberBandMenuItems(),
                                    {
                                      label: "Console log selected region",
                                      onClick: () => {
                                        const { leftOffset, rightOffset } = self
                                        const selectedRegions = self.getSelectedRegions(
                                          leftOffset,
                                          rightOffset
                                        )
                                        // 打印选中的可能多个区域列表
                                        console.log("selected: ",selectedRegions);
                                      }
                                    }
                                ]
                            }
                        }
                    }
                })

                pluggableElement.stateModel = newStateModel
            }
            return pluggableElement
        }
    )
}

configure() { }

错误信息 #

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ForwardRef(InfoIcon) />, Did you accidentally export a JSX literal instead of a component?

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

解决方法 #

错误原因 #

你直接传入了已渲染的JSX元素（比如<InfoIcon />），但icon字段要求传入React组件类/函数，而非渲染后的JSX实例。

修正步骤 #

1. 从JBrowse2的UI组件库中导入目标图标组件（注意导入组件本身，不是渲染后的元素）
2. 在菜单配置项中，将icon值设为导入的组件，而非JSX写法

修正后的代码示例 #

// 先从JBrowse2核心UI库导入图标组件
import { InfoIcon } from '@jbrowse/core/ui'

class HighlightRegionPlugin extends Plugin {
    name = "HighlightRegionPlugin"

    install(pluginManager) {
    pluginManager.addToExtensionPoint(
        "Core-extendPluggableElement",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        pluggableElement => {
            if (pluggableElement.name === "LinearGenomeView") {
                const { stateModel } = pluggableElement
                const newStateModel = stateModel.extend(self => {
                    const superRubberBandMenuItems = self.rubberBandMenuItems
                    return {
                        views: {
                            rubberBandMenuItems() {
                                return [
                                    ...superRubberBandMenuItems(),
                                    {
                                      label: "Console log selected region",
                                      // 直接传入组件本身，而非已渲染的JSX
                                      icon: InfoIcon,
                                      onClick: () => {
                                        const { leftOffset, rightOffset } = self
                                        const selectedRegions = self.getSelectedRegions(
                                          leftOffset,
                                          rightOffset
                                        )
                                        console.log("selected: ",selectedRegions);
                                      }
                                    }
                                ]
                            }
                        }
                    }
                })

                pluggableElement.stateModel = newStateModel
            }
            return pluggableElement
        }
    )
}

configure() { }

补充说明 #

• JBrowse2的官方图标组件均来自@jbrowse/core/ui或对应插件的UI包，需确保导入路径正确
• 若使用自定义图标，需将其定义为React函数组件，再将组件本身传入icon字段，禁止传入已渲染的JSX元素

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