Question

如何重新加载组件，我的意思是不重新渲染组件，但我想再次调用componentDidMount（重新启动组件的生命周期）< / p>

class Test extends Component 
{

    componentDidMount()
    {
        console.log('component did mount');
    }

    reload = () => 
    {
        //RELOAD COMPONENT
    };

    render()
    {
        return (<Button onPress={this.reload}/>)
    }

}

Answer 1

您可以明确调用生命周期方法

reload = () => 
{
    //RELOAD COMPONENT
    this.componentDidMount();
};

如果要重新启动生命周期，则必须将其从DOM中删除并重新添加。

Answer 2

你想做什么。但这不是最好的做法。基本上，您需要从父组件切换组件的可用性。如下所示，父组件具有一个state属性，用于表示子组件的可用性。

＆＃13;

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state ={
      showChild : true
    }
  }

  componentDidMount() {
      console.log('Parent Mounted');
  }

  reloadChild = () => {
      this.setState({
        showChild : false
      })
    
      setTimeout(() => {
        this.setState({
          showChild : true
        })
      },100);

      console.log("Reload Child Invoked")
  }

  render() {
    return ( 
      <div >
        {this.state.showChild?
          <Child reloadChild={this.reloadChild}/> : null
        }
      </div>
    );
  }

}

＆＃13;

Child组件如下所示

＆＃13;

class Child extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount(){
    console.log('Child component Mounted');
  }

  componentWillUnmount(){
    console.log('Child Component Unmounted');
  }

  onButtonClick = () => {
    console.log("Button Clicked")
    this.props.reloadChild();
  }

  render() {
    return ( 
      <button onClick={this.onButtonClick}>
        Click Me
      </button>
    );
  }

}

＆＃13;

当您单击子组件的按钮时，它将调用父Component中的方法，该方法切换子组件的可用性。请注意，我在reloadChild（）方法中使用了setInterval来切换可用性。正如我之前所说，这不是最好的做法。只是一种解决方法。

Answer 3

每次创建和销毁组件时，请将其放置在全局变量componentArray中，以便可以在外部调用此条件下的所有生命周期方法。

class Test extends Component {
  constructor(props){
    super(props)
    // add 
    window.componentArray = window.componentArray || []
    this.index = new Date().getTime()
    window.componentArray.push(this)
  }
  componentDidMount(){
    console.log('componentDidMount')
  }
  componentWillUnmount(){
    // remove
    window.componentArray = window.componentArray || []
    window.componentArray = window.componentArray.reduce((pre,obj)=>{
      if(this.index != obj.index){
        pre.push(obj)
      }
      return pre
    },[])
  }
  reComponentDidMount(){
    this.componentDidMount()
  }
  render(){
    return <div>test</div>
  }
}


// outside like this run
componentArray.forEach(o=>{
   o.componentDidMount()
})

重装组件 - React

3 个答案: