javascript - 使用 Next.JS 的 React-Select V2.0

Question

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

我尝试使用 Next.JS 的 Emotion 示例来服务器渲染情感样式（https://github.com/zeit/next.js/tree/master/examples/with-emotion），但它似乎与 Styled-JSX 冲突我使用它，我得到了错误StyleSheet: insertRule accepts only strings.

我尝试使用此处显示的 Emotion babel 配置选项：https ://github.com/emotion-js/emotion/blob/master/docs/configurable-imports.md#babel-options

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

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

谢谢。

Answer 1

使用带有 Next.js 的 React-Select v2.0 渲染闪烁的解决方案是仅使用react-no-ssr在客户端渲染组件

Answer 2

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

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

如果您需要使用 Jest 测试此组件，请按照以下步骤操作。希望这可以帮助。

Answer 3

我目前使用没有 ssr 的 Next.js动态组件加载，如下所示：

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

像往常一样使用选择组件