我正在尝试从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>
);
}
}
发布于 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>
}
发布于 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>;
https://stackoverflow.com/questions/50595235
复制相似问题