Скажите компонент, чтобы уничтожить состояние на близких

Question

У меня есть родитель, который владеет ModalComponent:

render(){ 
return (
    <MyCustomModal 
    visible={this.state.displayModal} 
    //various properties 
    /> 
); 
} 

MyCustomModal имеет состояние, скажу MyCustomModal.myState. Когда я нажимаю save/cancel, я хочу, чтобы MyCustommodal.myState был сброшен до нуля. В настоящее время у меня есть функция для этого:

export function clearFields(){ 
    //called by onCancel to setState to null 
} 

Я нахожу это clearFields() сложным в управлении. Могу ли я восстановить состояние ребенка таким образом, чтобы мне самому не управлять этим состоянием?

Иными словами, есть ли способ подключиться к жизненному циклу компонента и сказать, чтобы он демонтировал ... или что-то в этом роде?

Answer 1

Вы можете решить, должен ли ваш дочерний компонент быть установлен или размонтирован в методе рендеринга родительского компонента. Всякий раз, когда вызывается метод рендеринга, создается виртуальная DOM, а затем сравнивается с фактическим существующим виртуальным DOM этого компонента (если таковой существует), то, если какие-либо изменения найдены, они применяются как соответствующие (монтирование или размонтирование дочерних элементов или изменение его реквизита и т. д.).

Таким образом, вы можете решить предоставить детям условия в методе рендеринга. Если ребенок уже установлен и он должен размонтироваться, его метод «componentWillUnmount» будет вызываться, и вы можете выполнить любой очищающий код, который вам нужен.

Посмотрите на следующем блоке кода для примера (или этого jsfiddle)

var World = React.createClass({ 
    componentWillUnmount: function() { 
    alert('This component is unmounting'); 
    }, 
    render: function() { 
    return (<span> World! < /span>); 
    }, 
    }); 

var Hello = React.createClass({ 
    _handleClick: function() { 
    this.setState({ 
     showChild: false 
    }); 
    }, 
    getInitialState: function() { 
    return { 
     showChild: true, 
    }; 
    }, 
    render: function() { 
    var childNode = null; 
    if (this.state.showChild) 
     childNode = (< World/>); 
    return <div > Hello { 
     childNode 
    } < button onClick = { 
     this._handleClick 
    } > Click < /button></div > ; 
    } 
}); 

ReactDOM.render(< Hello/> , 
    document.getElementById('container') 
);