Использование метода класса React из отдельного компонента

Question

На домашней странице моего сайта вы можете нажать кнопку меню, которая запускает метод, который переключает меню. Это изменяет состояние от menuOpen от false до true.

На другой странице я нажимаю кнопку «назад», и она должна идти по домашнему маршруту, но откройте это меню, когда страница загрузилась, а не когда я нажимаю. В настоящее время все у меня есть:

handleBack(){ 
    App.navigate('/'); 
} 

Могу ли я import компонент и вызвать его метод? Или я могу настроить новый маршрут React Router, который каким-то образом выполняет изменение состояния? Или есть другой способ?

Answer 1

Redux поможет, но поскольку я предполагаю, что вы не используете это ИЛИ, вы не хотите реорганизовывать все свое приложение, чтобы установить это логическое значение, я бы рекомендовал использовать компонент более высокого порядка.

Так, например, вы бы определить компонент высшего порядка (думает, суперкласс), как это:

export function menuToggler(ComposedComponent) { 

    return class extends React.Component { 
     toggleMenuBoolean() { 
      // code here 
     }, 
     render() { 
      return <ComposedComponent toggleMenuBoolean={toggleMenuBoolean} {...this.props} /> 
     } 
    }; 
} 

Затем, в обычном компоненте, вы просто обернуть его с более высокой составляющей порядка. Так, если ранее вы использовали ES6 и экспортировать ваш компонент, как это:

export default MyComponent; 

Он бы тогда:

export default menuToggler(MyComponent); 

Оттуда, вы можете вызвать эту toggleMenuBoolean функцию из любого компонента, который обернут ваш выше компонент для того, просто вызывая его на подпорки:

this.props.toggleMenuBoolean(false) и т.д.

Больше чтение здесь:

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.sh6m9c9ct

Answer 2

Если вы хотите этот сценарий, передайте значение состояния родительскому компоненту, который является «умным компонентом», управляет немыми компонентами. Или вы можете использовать 'flux'/'redux'.