Javascript 由于道具更改，未重新提交React本机克隆子组件

我正在创建一个自定义导航器组件。我需要为Navigator的堆栈组件提供一个

Navigator

prop，以允许它们推送和弹出如下场景：

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

除了一个特定的场景外，一切都很好

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

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={toggle:false}
}
render（）{
返回(
{
this.setState（{toggle:！this.state.toggle}）
}}>
切换
)
}

---

当我将一些可变的道具传递给导航器的子组件时，道具一旦改变，子组件就不会重新渲染。在上面的示例中，尽管用户按下了切换按钮，SampleScene的背景色仍保持为黑色（因为

toggle

的应用程序类初始状态设置为

false

）。SampleScene的

render（）

方法似乎只调用了一次。如何排除此行为的故障？

问题已解决。在Navigator内部，我必须通过componentWillReceiveProps拦截新道具。通过setState方法将堆栈设置为newProps的子对象，可以正确地重新启动导航器

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