javascript - 如何以正确的方式 react child 的裁判

首先，我要说我明白您不应该使用引用。

话虽如此，我认为在我的情况下这是非常有效的。具体来说，我使用的是window.onscroll处理程序，不能简单地在onscroll处理程序中更改 Prop 。在滚动处理程序中更改状态或 Prop 会过于频繁地重新释放子组件，这会导致过多的滞后。

因此，由于我的场景只需要在滚动上设置元素的样式(即，当元素滚动到 View 之外时，我会在页面顶部粘贴一些内容)，因此只需设置this.refs.myelement.style.position = 'fixed'即可获得0滞后

我的问题是我目前正在做:
this.refs.childelement.refs.childschildelement.refs.childschildschildselement.refs.style.position = 'fixed'
基本上，我对要设置样式的实际元素有onscroll handler 3个 parent 。

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

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

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

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

那么，如何在不必自上而下传递引用的情况下使它变得更好呢？我目前的使用方式非常丑陋...

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

任何建议都将受到欢迎。

最佳答案

像所有事物一样，我相信有很多方法可以解决一个问题，这就是我要解决的方法。

我将抽象注册/注销节点滚动事件以及在预定位置向“服务”触发自定义事件的职责。

可滚动组件或应用程序容器(List组件？)将是滚动通知服务及其子控件

之间的粘合剂

可滚动组件将通过prop将自定义注册函数传递给其子级。此自定义注册功能将接收节点(工具栏)以监视位置，并接收回调以设置/取消设置位置

子级(RichTextEditor组件)会使用onRegisterPinableToolbar中的节点以及该子级可以用来修改其节点样式的回调函数在componentDidMount上调用函数(例如ReactDOM.findDOMNode😁)。

笔记:

当然，您还需要清除componentWillUnmount。

对您的应用程序了解不多，但我会尝试为编辑器创建HOC，例如PinableToolbarRichTextEditor

通过抽象化寄存器以将事件滚动到服务，您可以使用requestAnimationFrame进行优化，并为较旧的浏览器提供后备功能。

传递给 child 的函数看起来像这样(node:Node, setPinability:Function) => unregister:Function

我知道命名pinability并不是最好的😶

关于javascript - 如何以正确的方式 react child 的裁判，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40476716/