Rechart 組件可以用 React.lazy 加載嗎？

Question

我正在嘗試實現代碼拆分，但某些組件無法正常工作。 從文檔中，組件必須來自export default ，這些是。 我也嘗試將它們作為默認值導出到我自己的文件中，但沒有奏效。

這是一個示例組件。 可以拆分幾個組件，如果我嘗試這樣做，其余組件將不會呈現。

import React, { lazy, Suspense } from 'react'
import {
  Bar,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'
const BarChart = lazy(() => import('recharts/lib/chart/BarChart'))
const ResponsiveContainer = lazy(() => import('recharts/lib/component/ResponsiveContainer'))

const barAxisTick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text dy={16} textAnchor="middle" fill="#666">{payload.value}</text>
    </g>
  )
}

const StackedBarChart = ({ data, height }) => (
  <Suspense fallback={<div style={height}></div>}>
    <ResponsiveContainer height={height.height} id="timeline">
      <BarChart data={data} margin={{ top: 16, right: 32, left: 8, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" tick={barAxisTick} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="Collected" stackId="a" fill="#1976d2" />
        <Bar dataKey="Due" stackId="a" fill="#d32f2f" />
      </BarChart>
    </ResponsiveContainer>
  </Suspense>
)

export default StackedBarChart

Answer 1

const BarChart = lazy(() => import('recharts').then(module => ({ default: module.BarChart })));
const ResponsiveContainer = lazy(() => import('recharts').then(module => ({ default: module.ResponsiveContainer })));
const Bar = lazy(() => import('recharts').then(module => ({ default: module.Bar })));
const XAxis = lazy(() => import('recharts').then(module => ({ default: module.XAxis })));
const YAxis = lazy(() => import('recharts').then(module => ({ default: module.YAxis })));
const CartesianGrid = lazy(() => import('recharts').then(module => ({ default: module.CartesianGrid })));
const Tooltip = lazy(() => import('recharts').then(module => ({ default: module.Tooltip })));
const ReferenceLine = lazy(() => import('recharts').then(module => ({ default: module.ReferenceLine })));

recharts 沒有導出默認值，所以你必須像這樣導入