在reactjs中有条件地将道具传递给组件

Question

I want to pass a props to the component only after it full fills a certain condition . I have this Paper component inside return of render in react. I want to pass the onScroll only when a condition is there.

<Paper className={classes.root}  onScroll={this.loadMoreClasses}>

What i want to achieve

<Paper className={classes.root}  organizationname!==null ?onScroll={this.loadMoreClasses} :null>

want onScroll to happen only when organizationname is not definedthere

Answer 1

You could pass it like this:

<Paper
    className={classes.root}
    onScroll={organizationname !== null ? this.loadMoreClasses : null}
/>

That way your Paper component receives the onScroll listener when the organisation name it set, but does not receive it otherwise. You need to make sure that the Paper component treats the onScroll prop as optional, otherwise you'll get errors from it trying to call a method that doesn't exist.

An alternative would be to always provide an onScroll prop and move the condition to your getMoreClasses method, making it do nothing if the organisation name is not set.