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

【问题标题】：React.js component doesn't work in Next.js buildsReact.js 组件在 Next.js 构建中不起作用
【发布时间】：2022-01-27 00:37:04
【问题描述】：

我正在尝试将 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 构建中工作的一般帮助。

【问题讨论】：

标签： javascript reactjs next.js babeljs flashing

【解决方案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
}

【讨论】：