变化状态JSX

Question

宣布我实施的一个项目

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

的反应本地刷卡（https://github.com/leecade/react-native-swiper），我想的方法_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重新呈现，即如何从MainSwiper方法访问SomeView元素？

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。