React原生克隆的子組件不會因爲道具更改而被重新渲染

Question

我正在創建自定義導航器組件。我需要提供導航的堆棧組件navigator道具，讓他們push和pop的場景是這樣的：

this.props.navigator.push(<Product id='4815'>) 
this.props.navigator.pop() 

爲了實現這個結果，我的導航器的類中，我使用React.cloneElement()：

class Navigator extends Component { 

    constructor(props) { 
    super(props) 
    this.state = { stack: [this._addNavigator(props.children)] } 
    } 

    _addNavigator(scene) { 
    return React.cloneElement(scene, { 
     navigator: { 
     push: this.push, 
     pop: this.pop, 
     popToRoot: this.popToRoot 
     } 
    }) 
    } 

    push(scene) { 
    this.setState({ 
     stack: [...this.state.stack, this._addNavigator(scene)] 
    }) 
    } 

    ... 

} 

一切工作得很好，除了一個特定的情況。

class App extends Component { 
    constructor(props) { 
    super(props) 
     this.state = { toggle: false } 
    } 
    render() { 
    return (
     <View> 
     <TouchableOpacity onPress={() => { 
      this.setState({ toggle: !this.state.toggle }) 
     }}> 
      <Text>Toggle</Text> 
     </TouchableOpacity> 
     <Navigator> 
      <SampleScene backgroundColor={this.state.toggle ? 'green' : 'black'} /> 
     </Navigator> 
     </View> 
    ) 
    } 

當我通過一些可變道具導航孩子，只要道具的變化，子組件不會重新呈現。在上面的示例中，儘管用戶按下切換按鈕，但SampleScene的backgroundColor保持黑色（因爲toggle的應用程序類初始狀態設置爲false）。看起來好像SampleScene的render()方法只被調用一次。我怎麼能解決這個問題？

Answer 1

問題解決了。在Inside Navigator中，我不得不通過componentWillReceiveProps攔截新的道具。通過setState方法將堆棧設置爲newProps的孩子，導航器正確地重新渲染。