在无状态React Native函数中引用组件

Question

I'm using an Accordion component which takes in a function to render the content. In the content I'm using a Slider . I'm trying to add a functionality to the Slider so you can also select a value by tapping a point in the bar. However I'm not able to reference the slider view from outside since you cannot use refs within a stateless component. Here is what I'm trying to do:

render() {
  Return (
    <Accordion 
      sections={SECTIONS}
      renderHeader={this.renderHeader}
      renderContent={this.renderContent}
    />
  )
}

tapSliderHandler = (evt) => {
  this.refs.slider.measure((fx, fy, width, height, px, py) => { 
    this.setState({value: (evt.nativeEvent.locationX - px) / width}); 
  })
}

renderContent = (section, i, isActive) => {
  return (
    <View ref="slider" style={styles.container}>
      <TouchableWithoutFeedback onPressIn={this.tapSliderHandler}>
          <Slider
          value={this.props.appState[section.id]}
          onValueChange={value => this.props.appState[section.id] = value}
          />
      </TouchableWithoutFeedback>
    </View>
  );
}

The problem is that I cannot reference the ref="slider" from tapSliderHandler since the function is stateless. Any ideas on how to solve this?

I found answers on how to achieve this by using classes instead of stateless functions, but I can't figure out how to do this when the accordion expects a function for rendering the content.

The tapping code is following an example taken from here .

Answer 1

Assuming your question is, "How to I call the renderContent function and pass along the arguments (section, i, isActive)?" then this is how you could do that.

<Accordion 
  sections={SECTIONS}
  renderHeader={this.renderHeader}
  renderContent={this.renderContent.bind(null, section, i, isActive)}
/>

But I'm not positive that's the solution you're looking for. If not, see my comment and help me understand where your code breaks down on you.