javascript - React-Select V2.0 与 Next.JS

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

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

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

如果你需要用 Jest 测试这个组件，here's how你会那样做。希望这会有所帮助。