在角度世界中，React的「$ emit」是什麼

Question

在Angular中，我們可以使用$ scope。$ emit方法來通知祖先。我們如何在React中做同樣的事情？

Answer 1

這個簡單的解決方案是將回調從父對象傳遞給子對象，等等......當下降調用回調時，它將在父對象的上下文中運行。

class Parent extends React.Component { 
 
    constructor() { 
 
    this.click = this.click.bind(this); // bind the handler to this 
 
    } 
 
    
 
    click(view) { 
 
    this.setState({ view }); // change the state 
 
    } 
 
    
 
    render() { 
 
    return <Child clickHandler={ this.click } />; // pass CB to child 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    render() { 
 
    return <GrandChild clickHandler={ this.props.clickHandler } />; // pass CB to grandChild 
 
    } 
 
} 
 

 
class GrandChild extends React.Component { 
 
    render() { 
 
    return <button onClick={() => this.props.clickHandler('nextViewId') }>Click</button>; // invoke CB on click 
 
    } 
 
}

的問題是，如果你有一個大的樹組成部分，你將不得不多回調轉移到多個級別。這意味着每個容器可以有多個屬性，只是通過CBs，使測試和維護非常困難。針對小應用使用此解決方案。

對於大型應用程序，您應該使用基於Flux的體系結構，例如redux。大概的想法是，每個動作都由調用組件調度，並由主存儲庫處理，這會創建一個新模型，並將其傳遞到組件樹的根目錄。這樣，每個組件都可以獲取所需的所有數據，並且可以根據需要處理它。這會感覺有點像使用Angular的$廣播到根。