remix.run and Fusion图表

发布于 2025-02-10 02:02:25 字数 629 浏览 2 评论 0 原文

在A react-fusionCharts remix.run 应用程序似乎不起作用吗？有解决方法吗？

reactfc.fcroot（fusionCharts，column2d，gammeltheme）

我会遇到此错误：

reference> Reference eRror：未定义文档

也有意义，因为Remix使用SSR，但即使我使用这个安全的后卫失败了（推荐的方法来自 remix docs < /a>）：

if (typeof document !== 'undefined') {
    ReactFC.fcRoot(FusionCharts, Column2D, GammelTheme)
}

原文

Using react-fusioncharts in a Remix.run app doesn't seem to work? Any workarounds?

ReactFC.fcRoot(FusionCharts, Column2D, GammelTheme)

I'm getting this error:

ReferenceError: document is not defined

It makes sense since Remix use SSR, but even if I use this safe guard it fails (recommended approach from Remix docs):

if (typeof document !== 'undefined') {
    ReactFC.fcRoot(FusionCharts, Column2D, GammelTheme)
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

莫言歌 2025-02-17 02:02:25

该组件需要包裹在 clientonly 组件中，来自 -utils 。这样，组件只会仅在客户端上渲染，并且不会受到服务器渲染的效果。

// components/chart.jsx
import * as ReactFS from 'fusionchart'

export default function Chart() {
  // this component will only render on the client
  // and will not be server rendered
  return (
    {/* fusion chart components */}
  )
}

// routes/index.tsx
import {ClientOnly} from 'remix-utils'
import Chart from '~/components/chart'

export default function() {
  return (
    <ClientOnly fallback={<LoadingSkeleton />}
      {() => <Chart />}
    </ClientOnly>
  )
}

The component needs to be wrapped inside a ClientOnly component from remix-utils. This way, the component will render only on the client and will not be server-rendered.

// components/chart.jsx
import * as ReactFS from 'fusionchart'

export default function Chart() {
  // this component will only render on the client
  // and will not be server rendered
  return (
    {/* fusion chart components */}
  )
}

// routes/index.tsx
import {ClientOnly} from 'remix-utils'
import Chart from '~/components/chart'

export default function() {
  return (
    <ClientOnly fallback={<LoadingSkeleton />}
      {() => <Chart />}
    </ClientOnly>
  )
}

回复收藏 0 原文

~没有更多了~