Question

今天我正在寻找React解决方案来在两个组件之间进行通信，并在滚动更改时更新TableComponent中的HTML类。

ScrollComponent：

export class ScrollComponent {
   onScrollMove(){
      ...
   }

   render(){

   }
   ...
}

TableComponent：

export class TableComponent {
   ...

   render() {
      return <div className="table">...</div><ScrollComponent/>
      // ScrollComponent is a child here to move table content
   }
}

我的问题是我应该使用什么来检查TableComponent内部ScrollComponent是否已更改其位置，同时将表类添加到table-scroll-moved之类的内容。

解决问题的解决方案，概念和想法是什么？

Answer 1

您的问题不是很明确，但我会根据您提供的信息帮助您。实现所要求的一种方法是通过子的props将一个方法从TableComponent传递给ScrollComponent。这可能看起来像：

export class TableComponent {
   ...

   scrollPositionHasChanged = () => {
      // do something
   }

   render() {
      return (
         <div className="table">...</div>
         <ScrollComponent
            scrollPositionHasChanged={ this.scrollPositionHasChanged }
         />
   }
}

然后在ScrollComponent中，您将在onScrollMove函数中调用scrollPositionHasChanged，如下所示：

export class ScrollComponent {
   onScrollMove(){
      this.props.scrollPositionHasChanged();
   }

   render(){

   }
   ...
}

但是，我喜欢将所有“动作”发送到单个对象中以提高可读性。这不是必需的，但是当您将大量道具传递给子组件时，它有助于保持清洁。如下所示：

<ScrollComponent
   actions={{ onChange: this.scrollPositionHasChanged }}
/>

然后在ScrollComponent中调用this.props.actions.onChange。键入的时间较长，但澄清了actions对象中的任何内容都是可调用的方法。

React - 更新自定义滚动更改的组件类

1 个答案: