React-Select V2.0 与 Next.JS

Question

我正在尝试将 React-Select V2.0 与 Next.JS 一起使用，但在服务器加载时，select 元素未设置样式并闪烁以设置样式。

我尝试使用 Next.JS 的情感示例来服务器呈现情感风格 (https://github.com/zeit/next.js/tree/master/examples/with-emotion)，但它似乎与我使用的 Styled-JSX 冲突，我收到错误 StyleSheet: insertRule accepts only strings.

但这会导致整个页面呈现为未设置样式，然后闪烁以设置样式。

有谁知道如何在 Next.JS 上使用 React-Select V2 进行服务器渲染？

谢谢。

Answer 1

使用 Next.js 的 React-Select v2.0 渲染闪烁的解决方案是仅使用 react-no-ssr

在客户端渲染组件

Answer 2

我目前使用 Next.js dynamic component loading without ssr 是这样的：

const Select = dynamic(
  () => import('react-select').then((mod) => mod.default),
  {
    ssr: false,
    loading: () => null,
  },
);

照常使用select组件

Answer 3

与此处的其他答案类似，我使它正常工作的唯一方法是使用动态导入。我鼓励您提供某种加载指示器。

const ReactSelectNoSSR = dynamic(() => import('../components/select'), {
    loading: () => <Input />,
    ssr: false
});

如果您需要使用 Jest 测试此组件，here's how 您会这样做。希望这有帮助。

React-Select V2.0 with Next.JS