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>

TopToolbarAndroid

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

结果 componentWillUpdate没有更新工具栏标题，它没有被调用（重新渲染）。

Answer 1

您无需在TopToolbarAndroid中维护状态。只需在TopToolbarAndroid中进行此调整即可更新标题 -

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

也摆脱this.state。

我不确定this.props = props在构造函数中的作用。我只做super(props)。

如果这不起作用，请告诉我。请提供一个指向runnable app的链接，以便人们可以有效地解决您的问题。在您的问题中添加react-native标记，以吸引合适的人。

在此举办您的示例 - https://rnplay.org/

如何调用componentWillUpdate（）来更新子组件状态？

1 个答案: