javascript - 如何在 React Native 中使用 Navigator 替换主组件中的特定子组件

Question

在我的场景中 <MainComponent />有这么多子组件。但是特定的子组件我需要用所有其他子组件填充新数据。

var MainComponent =  React.createClass({ 
     renderScene:function(route, navigator) {

         var type=this.props.type;
         if(type =="text"){
            <GetInputField/>
          }
         else if(type=="number"){
            <GetNumberField/>
         }
         else if(type=="image"){
            <GetImageField />

     //using this <GetImageField> component i am showing two buttons.
     //while click on the button i moving to another scene .
     //in this scene i am showing local images using CameraRoll component.
    // When select the image i need to populate that image in the <GetImageField/> component  through the navigator.
    // But i am unable to replace to the <GetImageField/> component using navigator
         }

     },

      render:function() {
          return(<Navigator
               renderScene={this.renderScene.bind(this)}
               navigator={this.props.navigator}
               navigationBar={
                 <Navigator.NavigationBar style={styles.navBarStyle}
                     routeMapper={NavigationBarRouteMapperDisplayCustomSchema} />
               } />)
     }

 })

在我的场景中，我需要填充 <GetImageField /> 中的图像与 <MainComponent/> 的其他组件的组件

Answer 1

如果 CameraRoll 是 GetImageField 的子级，您只需传递回调属性即可。例如:

var GetImageField = React.createClass({
  render: function() {
    return <CameraContainer onPhotoSelected={this.updatePhotos} />
  },

  updatePhotos: function(images) {
    this.setState({ images });
  }
});

如果它不是子项，那么您可能需要使用事件来传播信息。

可能值得一读overview of how React components can communicate .