React: 如果data位于`服务器中,则会丢失`data-reactroot =“”`<context.provider>`</context.provider>

创建于 2019-03-05  ·  5评论  ·  资料来源: facebook/react

您是否要请求功能或报告错误

漏洞。

目前的行为是什么?

<React.Fragment><div>Hello!</div></React.Fragment> .renderToString()上调用<React.Fragment><div>Hello!</div></React.Fragment>会产生<div data-reactroot="">Hello!</div>

但是,在没有data-reactroot=""情况下,呈现了“不可见” React元素中的DOM根元素的许多其他组合。

例如,以下所有内容均产生<div>Hello!</div> (不包含data-reactroot="" ):

<React.Fragment><React.Fragment><div>Hello!</div></React.Fragment></React.Fragment>

<Context.Provider><div>Hello!</div></Context.Provider>

<Context.Consumer>{() => <div>Hello!</div>}</Context.Consumer>

<React.StrictMode><div>Hello!</div></React.StrictMode>

如果当前行为是错误,请提供重现步骤,并尽可能提供问题的最小演示。 将链接粘贴到以下示例中的JSFiddle(https://jsfiddle.net/Luktwrdm/)或CodeSandbox(https://codesandbox.io/s/new)的示例中:

看上面。

预期的行为是什么?

我假设以上任何示例都应在div元素上生成包括data-reactroot=""标记。

哪个版本的React,以及哪个浏览器/操作系统受此问题影响?

在所有版本大于等于16.7.0的版本中,也可能在较早版本中存在此问题。

这是一个小问题-我猜只会影响使用.render()而不是.hydrate()在客户端对标记进行补水的位置,因此不建议使用。 但是,仍正式支持使用.render()进行补水。

我可以实施修复程序并进行PR。 但是,谁能确认预期的行为就是我所认为的那样,并且确实是一个错误?

Server Rendering Bug

最有用的评论

太好了。 感谢您的迅速反应。 我会尽快提交PR-应该在接下来的几周内。

所有5条评论

这听起来确实像个错误。 修复将受到欢迎。

太好了。 感谢您的迅速反应。 我会尽快提交PR-应该在接下来的几周内。

我已经提交了PR#15023。

@gaearon任何人都有机会查看我在PR#15023中对此的解决方案?

现在,react-apollo使用的是Context API,因此,我们的构建被破坏了。

此页面是否有帮助?
0 / 5 - 0 等级