如何以正确的方式反应孩子的参考

Question

首先让我说，我明白你永远不应该使用裁判。

话虽如此，我认为在我的情景中它是非常有效的。具体来说，我使用的是window.onscroll处理程序，不能简单地更改onscroll处理程序中的props。在onscroll处理程序中更改状态或道具会过于频繁地重新呈现子组件，这会导致延迟太多。

因此我的场景只需要在滚动时设置元素的样式（即当它滚动到视图外时我在页面顶部粘贴了一些东西），只需设置this.refs.myelement.style.position = 'fixed'就可以得到0滞后

我的问题是我目前正在做的事情：

this.refs.childelement.refs.childschildelement.refs.childschildschildselement.refs.style.position = 'fixed'

基本上我有onscroll handler 3个父母关于我要设计风格的实际元素。

我的页面由List组件组成。这包含ReadOnlyOrEditable个组件。可编辑的组件为RichTextEditors，其中包含Toolbar组件。当窗口滚动事件发生时，我需要将该位置设置为固定的Toolbar。

因此，在一个页面上，我将有10个ReadOnlyOrEditable个组件，其中5个是RichTextEditors，每个组件都有Toolbar。

工具栏上有斜体，粗体等按钮

当用户向下滚动时，如果工具栏不在视图范围内，我们不希望用户必须向上滚动。即因此，如果工具栏不在视图范围内，我们希望将位置设置为固定，以便用户可以立即点击斜体/粗体等。

那么如何在不从顶部传递refs的情况下使这个更好？我现在拥有它的方式非常难看......

我更喜欢让onscroll处理程序靠近列表的位置，因为在每个工具栏组件中都有window.onscroll处理程序意味着我正在设置多个window.scroll处理程序，这是浏览器上不必要的工作。

欢迎任何建议。

Answer 1

就像所有事情一样，我相信有很多方法可以解决一个问题，以及我将如何解决这个问题。

1. 我会将注册/取消注册的责任抽象到节点滚动事件，并将预定位置的自定义事件发送到＆＃34;服务＆＃34;。
2. 可滚动组件或应用容器（List组件？）将成为滚动通知服务及其子级之间的粘合剂
3. 可滚动组件会通过道具将自定义注册功能传递给其子项。此自定义注册功能将接收节点（工具栏）以监视位置和回调以设置/取消固定位置
4. 子（RichTextEditor组件）将使用来自onRegisterPinableToolbar的节点调用componentDidMount上的函数（例如ReactDOM.findDOMNode）以及孩子可以用来修改的回调它的节点风格。

注意：

• 当然，您还需要在componentWillUnmount上进行清理。
• 不太了解您的申请，但我会尝试为编辑创建一个HOC，例如： PinableToolbarRichTextEditor
• 通过抽象寄存器将事件滚动到服务，您可以使用requestAnimationFrame进行优化，并为旧浏览器提供回退。
• 传递给孩子的功能看起来像(node:Node, setPinability:Function) => unregister:Function

我知道命名pinability不是最好的

Answer 2

不是试图获得一个深层嵌套组件的引用，而是将“固定”状态作为道具传递下来，让伟大的（伟大的？） - 孙子检查属性并设置自己的风格。 / p>