變化狀態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。