Question

我正在使用一个Accordion组件，它接受一个函数来呈现内容。在内容中我使用Slider。我正在尝试向Slider添加功能，因此您还可以通过点击栏中的点来选择值。但是我无法从外部引用滑块视图，因为您无法在无状态组件中使用refs。这是我正在尝试做的事情：

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>
  );
}

问题是我无法从tapSliderHandler引用ref =“slider”，因为该函数是无状态的。关于如何解决这个问题的任何想法？

我找到了如何通过使用类而不是无状态函数来实现这一目标的答案，但是当手风琴需要一个用于渲染内容的函数时，我无法弄清楚如何做到这一点。

点击代码遵循从here获取的示例。

Answer 1

假设你的问题是，“如何调用renderContent函数并传递参数（section，i，isActive）？”那你就是这样做的。

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

但我并不认为这是你正在寻找的解决方案。如果没有，请参阅我的评论，并帮助我了解您的代码在哪里发生故障。

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

1 个答案: