[英]Ant Design Dropdown - Access props value inside children menus [ React ]
I have a list of posts like facebook feed, every single post has a dropdown with "edit,delete,report".我有一个像 Facebook 提要这样的帖子列表,每个帖子都有一个带有“编辑、删除、报告”的下拉菜单。
I use Ant Design UI, the problem is I can't access the props value "DeleteId" inside the children menus.我使用 Ant Design UI,问题是我无法访问子菜单中的道具值“DeleteId”。
But I can access props values (deleteId) inside the component.但是我可以访问组件内的道具值(deleteId)。
According to Ant Design here , children menus (menu) are declared outside the component.根据这里的Ant Design ,子菜单(menu)是在组件外声明的。
//-------------- Outside Component --------------------
const onClick = function (info) {
console.log(info)
};
const menu = (
<Menu onClick={onClick}>
{
// this.props.deleteId <=== this doesn't work, props value is "undefined"
}
<Menu.Item key="1">Edit</Menu.Item>
<Menu.Item key="delete-Id-here">Delete</Menu.Item>
<Menu.Item key="3">Report</Menu.Item>
</Menu>
);
//-------------- Inside Component --------------------
class Demo extends React.Component {
render(){
console.log("deleteId = "+ this.props.deleteId +" ( Inside component ) ")
// this.props.deleteId <=== This props value works fine, I can access all props data inside component
return (
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
<Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
</a>
</Dropdown>
)
}
}
ReactDOM.render( <Demo deleteId="123456"/>,
mountNode);
Probably, it doesn't know "props" values inside children menus可能,它不知道子菜单中的“道具”值
It appears that you're just missing passing on the props to your menu
functional component.看来您只是缺少将道具传递给
menu
功能组件。 Below is modified code to pass deleteId
as a parameter to the menu
function.下面是将
deleteId
作为参数传递给menu
函数的修改代码。
const menu = (deleteId) => (
<Menu onClick={onClick}>
<Menu.Item key="1">Edit</Menu.Item>
<Menu.Item key="delete-Id-here">Delete {deleteId}</Menu.Item>
<Menu.Item key="3">Report</Menu.Item>
</Menu>
);
Demo
class Demo extends React.Component {
render(){
return (
<Dropdown overlay={menu(this.props.deleteId)}>
<a className="ant-dropdown-link" href="#">
<Icon style={{fontSize:24}} type="ellipsis" theme="outlined" />
</a>
</Dropdown>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.