Question

我在项目中实现了反应原生swiper（https://github.com/leecade/react-native-swiper）

class MainSwiper extends React.Component {
  _onMomentumScrollEnd() {
    // Edit some state of the SomeView here...
  }

  render() {
    return (
      <Swiper
        onMomentumScrollEnd={this._onMomentumScrollEnd}>
        <View>
          <SomeView />
        </View>
        // More views here...
      </Swiper>
    );
  }
}

AppRegistry.registerComponent('some_app', () => MainSwiper);

我希望方法_onMomentumScrollEnd()能够改变JSX中声明的SomeView的某些状态。

假设SomeView定义为：

class SomeView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {somestate = 'Hi!'};
  }

  render() {
    return (
      <Text>{this.state.somestate}</Text>
    );
  }
}

我意识到我可能会以错误的方式处理这个问题，但我不知道它是如何完成的。如何从somestate（或任何其他_onMomentumScrollEnd()方法）更改MainSwiper并让SomeView重新呈现，即如何访问SomeView MainSwiper方法中的元素？

Answer 1

您应该通过其道具将状态传递给SomeView组件。所以你可以做到

class MainSwiper extends React.Component {
  _onMomentumScrollEnd() {
    this.setState({somestate: A String})
  }

  render() {
    return (
      <Swiper
        onMomentumScrollEnd={this._onMomentumScrollEnd}>
        <View>
          <SomeView somestate={this.state.somestate} />
        </View>
        // More views here...
      </Swiper>
    );
  }
}

AppRegistry.registerComponent('some_app', () => MainSwiper);

然后在SomeView中

class SomeView extends React.Component {
  render() {
    return (
      <Text>{this.props.somestate}</Text>
    );
  }
}

注意SomeView组件如何通过不保持自己的状态而成为无状态组件。它不是强制性的，而是a good practice。

更改JSX

1 个答案: