mobx-react error

[lh12565]

你好，我在vue3中引入一个react项目：https://github.com/cBioPortal/cbioportal-frontend/tree/master/packages/react-mutation-mapper 报错，代码见下，请问怎么解决呢？谢谢！ 报错：

Uncaught Error: [mobx-react] Cannot read "LollipopPlotNoTooltip2.props" in a reactive context, as it isn't observable.
                    Please use component lifecycle method to copy the value into a local observable first.

jsx:

import * as React from 'react'

import {LollipopPlot} from 'react-mutation-mapper'
import { observer } from 'mobx-react';

// @observer
class Example extends React.Component {
  render () {
    return (
      <LollipopPlot
        lollipops={[
          {codon: 36, count: 6, color: "#6600AA"},
          {codon: 366, count: 4, color: "#00AAFF"},
          {codon: 606, count: 8, color: "#AA0066"}
        ]}
        domains={[
          {startCodon: 6, endCodon: 66, color: "#FF9900", label: "D1"},
          {startCodon: 566, endCodon: 616, color: "#0044CC", label: "D2"}
        ]}
        vizWidth={640}
        vizHeight={200}
        xMax={666}
        yMax={10}
      />
    )
  }
}

export  default observer(Example);

vue3:

<template>
     <BasicPure></BasicPure>
  </template>
  <script>
import { createRoot } from 'react-dom/client'
import { setVeauryOptions } from 'veaury'
setVeauryOptions({
  react: {
    createRoot
  }
})

  import {applyReactInVue, applyPureReactInVue} from 'veaury'
  import BasicReactComponent from './react_app/mutmap.jsx'
  import {ref} from 'vue'
  
  export default {
    components: {
      BasicPure: applyPureReactInVue(BasicReactComponent)
    },
  }
  </script>

[devilwjp]

@lh12565

修改jsx的部分为如下

import * as React from 'react'

import {LollipopPlot} from 'react-mutation-mapper'
import { observer } from 'mobx-react';

// @observer
class Example extends React.Component {
  render () {
    return (
      <LollipopPlot
        lollipops={[
          {codon: 36, count: 6, color: "#6600AA"},
          {codon: 366, count: 4, color: "#00AAFF"},
          {codon: 606, count: 8, color: "#AA0066"}
        ]}
        domains={[
          {startCodon: 6, endCodon: 66, color: "#FF9900", label: "D1"},
          {startCodon: 566, endCodon: 616, color: "#0044CC", label: "D2"}
        ]}
        vizWidth={640}
        vizHeight={200}
        xMax={666}
        yMax={10}
      />
    )
  }
}
const ObserverExample = observer(Example)

export default function(props) {
  return <ObserverExample {...props}/>
}