警告：文本内容不匹配...但是确实如此

发布于 2025-02-09 09:46:06 字数 734 浏览 0 评论 0原文

我正在尝试SSR，因为我以前从未遇到过这个主题，并且想了解更多有关该主题。我已经构建了一个简单的SSR，它可以正常工作，除非我在混音中添加一些变量。

这可以正常工作：

<span>msg: hello</span>

这会引起错误：

const txt = 'hello';
...
<span>msg: {txt}</span>

警告：文本内容与不匹配。服务器：“ msg：hello”客户端：“ msg：”

如果我检查文档请求，这是我从Local主持那里得到的：

<span>msg: hello</span>

当我检查元素时：

<span>
"msg: "
"hello"
</span>

我的最初思考是水合没有读取下一行，只需看到“ msg：”，即使是，它在DOM中看起来不错，所有数据都是正确的。

我可以，但是使它与Templatestring ＆lt; span＆gt; {`smg：$ txt}`}＆lt;/span＆gt;一起使用。但是我有几种情况，可以检查用功能打印的内容。

任何人都会收到有关此信息的更多信息，如何使React Hydration更加开放并检查下一行？

原文

I'm experimenting with SSR since I've never touched the subject before and want to learn more about it. I've built a simple SSR and it works fine, except when I add some variables in the mix.

This works fine:

<span>msg: hello</span>

This cast an error:

const txt = 'hello';
...
<span>msg: {txt}</span>

Warning: Text content did not match. Server: "msg: hello" Client: "msg: "

If I check the doc request this is what I get from localhost:

<span>msg: hello</span>

and when I inspect element:

<span>
"msg: "
"hello"
</span>

My initial thinking is that the hydration does not read the next line, and just see "msg: ", even tho, it looks fine in the dom and all the data is correct.

I can, however make it work with a templatestring <span>{`msg: $txt}`}</span>
but I have several cases where I check what to print with a function.

Anyone got more information on this one, how can I make React hydration to be more open minded and check for the next line?

分享到QQ

分享到微博