如何从React中的子元素/DOM/组件调用父元素的方法？
如何从React中的子元素/DOM/组件调用父元素的方法？
提问于 2018-05-30 09:41:01
我正在尝试从DrawerItem DOM调用closeBtn方法。既然它是ToggleDrawer的子组件，那么DrawerItem如何访问closeBtn方法呢？
class Header extends React.Component {
//no method here
render() {
return (
...
<ToggleDrawer
icon_class="notify-toggle"
alignment="right"
icon_link={Url.urlForStatic('images.g')} ...
>
<DrawerItem text="Alert 1" />
<DrawerItem text="Alert 2" />
<DrawerItem text="Alert 3" />
</ToggleDrawer>这是ToggleDrawer类。
class ToggleDrawer extends React.PureComponent {
...
closeDrawer() { //I want to call this method from DrawerItem.
//so that once user clicks the item, it closes the drawer.
this.ref.hide();
}
... 这是DrawerItem
class DrawerItem extends React.PureComponent {
render() {
console.log(this.props); // <- How can I get this.props.closeBtn method here?
return (
<div className="drawer-item">
<BinaryLink to={this.props.link_to}>
<span ...>{this.props.text}</span>
</BinaryLink>
</div>
);
}
}回答 2
Stack Overflow用户
发布于 2018-05-30 09:57:20
我认为如果你不使用Redux，你应该在ToggleDrawer之外处理状态和方法。为什么不制作一个像ToggleDrawerContainer这样的组件，并将该方法作为道具交付给DrawerItem。
class ToogleDrawerContainer extends React.Component {
closeDrawer(){};
<ToggleDrawer
icon_class='notify-toggle'
alignment='right'
icon_link={Url.urlForStatic('images.g')}...
>
<DrawerItem closeDrawer={this.closeDrawer} text='Alert 1'/>
</ToggleDrawer>
}Stack Overflow用户
发布于 2018-05-30 10:09:31
声明toggleDrawer:ToggleDrawer
<ToggleDrawer
ref={tg => {
if (tg) this.toggleDrawer = tg;
}}
icon_class="notify-toggle"
alignment="right"
icon_link={Url.urlForStatic('images.g')} ...
>
<DrawerItem
closeDrawer={this.toggleDrawer ? this.toggleDrawer.closeDrawer : () => {}}
text="Alert 1"
/>
<DrawerItem
closeDrawer={this.toggleDrawer ? this.toggleDrawer.closeDrawer : () => {}}
text="Alert 1"
/>
<DrawerItem
closeDrawer={this.toggleDrawer ? this.toggleDrawer.closeDrawer : () => {}}
text="Alert 1"
/>
</ToggleDrawer>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50595235
复制相关文章
相似问题
腾讯云开发者
