Javascript 是否不在客户端代码中插入span？

首先，我是一个新的反应者，最近我解决了这个问题

长话短说，我想在每条推文后面添加一个链接。为此，我只需在tweet项目中添加包含url和用户名的道具

当我查看该网站时，链接就在那里，然后它们立即消失

在控制台中，我收到以下警告：“React试图重用容器中的标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户机所期望的。React注入了新的标记以补偿其效果，但您已经失去了服务器呈现的许多好处。相反，请找出在客户端或服务器上生成的标记不同的原因“

此处出现错误的原因是服务器将列表项呈现为

，而客户端在此处呈现为

文本，没有span标记

为什么客户端没有像react那样将列表项内容包装在一个范围内。如果有必要，文本将作为prop
{this.props.text}
插入

我可以提供一些代码，但我不确定什么会有帮助，这都是非常基本的。tweet item render（）返回如下：

return (
  <li className="list-group-item">{this.props.text}<a href={this.props.url}>{this.props.user}</a></li>
);

编辑

摘录自服务器标记（一个列表项）：


RT@JeffLindner1:White Oak Bayou执法部门已重新开放除1条西行车道外的所有I-10主车道


摘自客户端/视图来源：

<div id='view'><div data-reactid=".21kkf2bdurk" data-react-checksum="1889651106">
  <h1 data-reactid=".21kkf2bdurk.0">Tweets</h1>
  <ul class="tweets list-group" data-reactid=".21kkf2bdurk.1">
    <li class="list-group-item" data-reactid=".21kkf2bdurk.1.$0">
      <span data-reactid=".21kkf2bdurk.1.$0.0">RT @EdwardEgrosFox4: Cole Beasley gets comforted by Jason Witten after botching the punt return. https://t.co/jF9MxRN9BV</span>
      <a href="https://twitter.com/FOX4/status/658431262240059392" data-reactid=".21kkf2bdurk.1.$0.1">FOX4</a>
    </li>


推特


RT@EdwardEgrosFox4:Cole Beasley在完成平底船返回后得到了Jason Witten的安慰。https://t.co/jF9MxRN9BV


所以跨度是存在的。但是警告的结尾是：

(client) ".21kkf2bdurk.1.$0">RT @EdwardEgrosFox4:
(server) ".21kkf2bdurk.1.$0"><span data-reactid="

（客户端）“.21kkkf2bdurk.1.$0”>RT@EdwardEgrosFox4:
（服务器）“.21kkkf2bdurk.1.$0”>我相信你想做的就是这样

return (
    <li className="list-group-item">
        <span>{this.props.text}</span>
        <a href={this.props.url}>{this.props.user}</a>
    </li>
);

返回(

{this.props.text}

);

如果您手动将其包装在一个跨度中，react显然不会将其包装在一个额外的跨度中，并且它将始终存在

总的来说，我认为最好的做法是将任何具有“自动”跨度的内容包装成一个特定的跨度。这样，代码中就不会发生“神奇”的事情，每次都可以得到特定的预期结果

记住如果您正在进行更改，您必须重新编译源代码以查看更改是否生效，或者运行构建过程
gulp
/
grunt
/
duo
…等等

编辑：

更新后，您似乎忘记将该脚本标记添加到html中。如果您查看html，则该html包含该脚本标记（搜索
Hmm，这太奇怪了..我原以为这样可以解决它！但事实并非如此。无论出于何种原因，控制台坚持认为客户端HTML仍然缺少跨度。它显然正在被剥离。警告摘录：“（客户端）=.”6pntflc3y8.1.$0“>推特_text_此处…（服务器）=“.6pntflc3y8.1.$0”>您是否可以在服务器端（即
console.log（markup）；
上发布它的实际外观片段，以及在客户端上发布html标记（检查元素）当然，我会把它添加到主菜单中post@TrésDuBiel还查看了此错误报告。其中有一些有用的提示，可用于比较前后的html，以查看是否/有什么不同John，出于某种原因，运行
gulp react
修复了所有问题。如果您可以在回答中添加注释说明原因，我会将其标记为正确。谢谢您r你所有的帮助在代码片段上你的数据reactid看起来不一样..这可能会使它将所有内容重新绘制到Dom中。看看我发布的关于打印前后准确输出的评论，首先确保它们是相同的嘿John，我部分地找出了问题所在，如果你能看一下，我会更新我的帖子。好的，我编辑了我相信你需要添加脚本标签。
(client) ".21kkf2bdurk.1.$0">RT @EdwardEgrosFox4:
(server) ".21kkf2bdurk.1.$0"><span data-reactid="

return (
    <li className="list-group-item">
        <span>{this.props.text}</span>
        <a href={this.props.url}>{this.props.user}</a>
    </li>
);