预期的服务器 HTML 在 <tag> 中包含匹配的 <tag>答案

【问题标题】：Expected server HTML to contain a matching <tag> in <tag>预期的服务器 HTML 在 <tag> 中包含匹配的 <tag>
【发布时间】：2020-09-26 07:04:00
【问题描述】：

我们正在使用 nextjs 并在页面刷新（或首次加载）时收到此错误

我的错误是：

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <tag> in <tag>.

我们的功能组件的代码如下所示：

export default MyComponent () {

  if(! props.something){  // ← this is causing the problem.
    return null;
  }

  return (
    <>
     HTML here ...
    </>
  )
}

据我了解，SSR 与客户端渲染不同，这就是 react 抱怨的原因。

应用程序运行正常，但此错误显示在控制台中，我们不希望出现太多错误，因为这可能会阻止我们在真正的错误发生时看到它们。

解决办法：

解决方案是使用动态导入并将组件调用包装到：

const MyDynamicComponent = dynamic(() => import('./myComponent'), {ssr: false});

//use it:
<MyDynamicComponent />

//OR :

const MyDynamicComponent = dynamic(() => import('./myComponent'))

//use it:
{typeof window !== 'undefined' && (
  <MyDynamicComponent />
)}

【问题讨论】：

感叹号后面的空格是错字吗？还是在代码中？

标签： javascript reactjs next.js

【解决方案1】：

可能动态导入您的组件应该可以解决这个问题。以下是您可以参考的链接； https://nextjs.org/docs/advanced-features/dynamic-import

【讨论】：

请避免发帖link only answers。这应该是评论，或者您需要在问题本身中包含这些链接的基本部分
其实这是我第一次回答问题。任何方式我都会记住这个建议。谢谢。
@Zeeshan 谢谢就是这样......但不仅如此，我还必须用{typeof window !== 'undefined' && ( 包装组件。我会接受你的回答并用完整的解决方案更新我的问题。

【解决方案2】：

我一直在寻找类似问题的解决方案，但我使用的是 react-window lib，问题似乎就在其中。我给它传递了不同的高度，这取决于它是在服务器上还是在客户端上加载，所以它给了我不同的元素。

我的解决方案是在开始时传递相同的高度，但在 useEffect 上将其更改为 window.innerHeight（= 在客户端负载上）。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

在我的情况下，代码首先在服务器上执行，然后在浏览器中执行，这就是为什么我收到此错误和其他样式组件错误，例如： Warning: Prop className did not match. Server: "CardUserInfo....

所以这个链接帮助： https://github.com/vercel/next.js/discussions/17443 enter link description here 以及对我来说的解决方案，如本次讨论中的 montienned 实施 useState useEffect

const [mount, setMount] = useState(false)
   useEffect(() => {
     setMount(true)
      
   }, [ ])
  return mount&&(
    <InfoUserCard/>)

【讨论】：