0

I have a React component called Conversation which renders potentially many Parts. I need each Part to know if the Conversation is scrolled. Is this possible, if so how?

class Conversation extends Component {
  handleScroll() {
      console.log('Each Part should be told that I just fired');
  }
  render() {
    <div className="conversation" onScroll={this.handleScroll.bind(this)}>
       <Part />
       <Part />
       <Part />
    </div>
  }
}
Tom T
  • 73
  • 1
  • 6

1 Answers1

0

Parent components should always pass information to sub-components through props e.g.,:

<Part someProp={this.getPartProps()} />

So figure out what information each Part component needs and just provide it.

EDIT:

To propagate that information from your event handler you will need to use component local state:

handleScroll: function() {
    this.setState({scrollFired: true});
}

Then you can set the props on Part:

<Part scrollFired={this.state.scrollFired} />
rojoca
  • 11,040
  • 4
  • 45
  • 46
  • Thank you for your answer but won't this strategy only work for the first time the parent is scrolled? Imagine the property passed to the Parts is parentScrolling=true. There is no scrollEnded function (as far as I know) so how can I ever set parentScrolling=false so that the Parts will be notified the second and third time the parent is scrolled? – Tom T Jan 14 '16 at 21:28
  • @TomT what do you want to do in the `` component when you scroll? – rojoca Jan 14 '16 at 22:36
  • Each Part can have a tooltip that is shown when the user hovers over the part. It looks awful when the parent is scrolled, so when the parent is scrolled I want each Part to hide its tooltip. – Tom T Jan 14 '16 at 22:46
  • In this case you're probably better to use a timeout on the tooltip i.e., wait half a second before showing the tooltip. If the the mouse leaves the `` component then cancel the timeout. – rojoca Jan 14 '16 at 23:11
  • 1
    I already do this but scroll is odd in this regard, mouseLeave is not fired for a Part if the mouse leaves that Part because of a scroll. This is why I am trying to react directly to parent scroll. – Tom T Jan 14 '16 at 23:16
  • 1
    I think I can use your original suggestion along with the concept of an artificial scrollEnd event (see http://stackoverflow.com/questions/13320933/how-to-detect-end-of-scrolling). Not sure this is the best solution... but it should work! – Tom T Jan 14 '16 at 23:18
  • It is a real pain that those mouse events don't fire on scroll. Your artificial scroll end idea seems like the only option. – rojoca Jan 14 '16 at 23:35
  • Thanks for your help @rojoca, its be great to think/talk this true with someone! – Tom T Jan 14 '16 at 23:36