javascript - React.js 组件在 Next.js 构建中不起作用

Question

我正在尝试将 React 手风琴组件构建为名为Accordie的NPM包。

它正在进行 Next.js 开发，但尚未投入生产。

这是开发模式的CodeSandbox演示和生产模式的Vercel演示。

在 CodeSandbox 上看起来像这样。

在 Vercel 上看起来像这样。

生产构建存在闪烁问题。我不知道该怎么做。构建脚本可能有问题。

我正在使用 Babel 来转译这样的 JSX 文件。

"build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files",

我需要有关如何构建 React 组件以使其能够在 Next.js 构建中工作的一般帮助。

Answer 1

我认为它与构建脚本无关。

我正在使用这样的东西。在地图内导出<Panel>和返回。<Panel>

const Panel = ({}) => {
  return (
    ...
  )
}

const Accordie = ({ children }) => {
  return (
    <>
      {children.map((child, key) => {
        if (child.type.name !== 'Panel') return null

        return (
          <Panel
            ...
          />
        )
      })}
    </>
  )
}

module.exports = {
  Panel,
  Accordie
}

现在只需导出一个空文件<Panel>并<PanelInner>改为使用。

const Panel = () => null

const PanelInner = ({}) => {
  return (
    ...
  )
}

const Accordie = ({ children }) => {
  return (
    <>
      {children.map((child, key) => {
        if (child.type.name !== 'Panel') return null

        return (
          <PanelInner
            ...
          />
        )
      })}
    </>
  )
}

module.exports = {
  Panel,
  Accordie
}