子コンポーネントの状態を更新するためにcomponentWillUpdate（）を呼び出す方法は？

Question

私のツールバーはすでにレンダリングされていますので、私はそのツールバーの状態を更新する必要があるときにcomponentWillUpdate（）を呼び出す必要がありますか？

のホームスクリーン

constructor(){ 
     super(); 

     this.state = { 
      pagenum: 0, 
      toptoolbartitle: "default", 
      homeviewtitle: "default", 
     }; 
    } 

    updateHomeViewTitle(viewtitle){ 
    console.log(viewtitle); 
    this.state.homeviewtitle = viewtitle; 
    console.log("homeviewtitle is now"+this.state.homeviewtitle); 
} 

    render() { 
    return (
     <View style={styles.container}> 
      <View style={{flex:1}}> 
      <TopToolbarAndroid 
      defaulttitle={"default"} titleupdate={this.state.homeviewtitle}/> 
        <RNCamera updateviewtitle={this.updateHomeViewTitle.bind(this)} /> 
        <BottomBar /> 
      </View> 

     </View> 

はcomponentWillUpdateが呼び出されていない（再レンダリング）、ツールバーのタイトルを更新していない

constructor(props){ 
     super(); 
     this.props = props; 
     this.state = { 
      pagenum: 0, 
      title: this.props.defaulttitle 
     }; 
    } 

    componentWillUpdate(){ 
    console.log("component will update?"); 
    if (this.props.titleupdate != null) 
    {console.log("updating toolbar title to: "+this.props.titleupdate); 
     this.setState({title: this.props.titleupdate});} 
} 


    render() {  
    return (
     <ToolbarAndroid 
       title= {this.state.title} 
       style={styles.toolbar} 
     /> 
    ); 
    } 

結果 をTopToolbarAndroid。

Answer 1

TopToolbarAndroidに状態を維持する必要はありません。 ただtitle-

title={this.props.titleupdate ? this.props.titleupdate : this.props.defaulttitle}

があまりにthis.stateを取り除く更新するTopToolbarAndroidで、この微調整を行います。

this.props = propsがコンストラクタで何を行うのかわかりません。私はちょうどsuper(props)をやるだろう。

これが機能しない場合はお知らせください。人々が問題を効果的に解決できるように、実行可能アプリへのリンクも提供してください。あなたの質問にreact-nativeのタグを追加して、適切な種類の人々を引き付ける。ここ

ホストあなたの例 - https://rnplay.org/