> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_advance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_advance/react/component-jian-hu-xiang-cun-qu.md).

# component 間 互相存取

## Component互相存取

如果不用context API或 redux 時可用以下方法在組建間傳遞prop或method。

1.<https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542>

```javascript
openDrawer = () => {
  this.drawer.openTheDrawer();
};

<Drawer onRef={ref => (this.drawer = ref)}>
  .....
   <button onClick={() => this.openDrawer()} />
</Drawer>
```

Drawer.js

```javascript
  componentDidMount() {
    this.props.onRef(this)
  }
  openTheDrawer(){
    ....
  };

  render(){
     <div>
        ......
       {this.props.children}
     </div> 
  }
```

這樣就可以存取到parent (Drawer) 的function，或是可在parent寫static function，但注意static function 沒有this

## Passing child red to parent

{% embed url="<https://stackoverflow.com/questions/42980402/react-passing-ref-from-dumb-componentchild-to-smart-componentparent>" %}

現在新的 hook 方法要參考：

<https://stackoverflow.com/questions/37949981/call-child-method-from-parent>