как запускать реагирующий компонент из другого компонента

Question

Я хочу активировать компонент реакции из другого компонента. Каков наилучший способ сделать это? Я не хочу создавать новый флаг в магазине redux, например «shouldShowMenu». Я думаю о статическом методе в реакции, но я не эксперт в реагировании.

import Menu from './component/menu' 
const clickfeed =() => {Menu.staticClickEvent()} 
<Provider> 
    <Menu> 
    <Feed onClick={clickfeed}/> 
</Provider> 

Могу ли я использовать статический метод, подобный этому, и должен ли я использовать статический метод для изменения состояния компонента.

Answer 1

Вы должны пойти и создать этот флаг shouldShowMenu в вашем магазине redux. Когда у вас есть компоненты, взаимодействующие таким образом, это состояние приложения. Сначала это кажется чрезмерным, но как только вы начнете иметь ценность, которая будет передаваться через компоненты, это сэкономит вам массу головных болей!

Answer 2

Для этого не требуется redux. Вы можете использовать ref для этого. Надеюсь, поможет!

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"></div> 
 
<script type="text/babel"> 
 
//component 1 
 
    var Hello = React.createClass({ 
 
    func: function() { 
 
     console.log('I\'m inside Hello component') 
 
    }, 
 
    render: function() { 
 
     return <div > Hello World< /div>; 
 
    } 
 
    }); 
 

 

 
//component 2 
 
    var Hello2 = React.createClass({ 
 
    componentDidMount(){ 
 
    //calling the func() of component 1 from component 2 using ref 
 
    \t this.refs.hello.func() 
 
    }, 
 
    render: function() { 
 
     return <Hello ref="hello"/>; 
 
    } 
 
    }) 
 

 

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

 
</script>