我有一个帖子列表,例如 Facebook feed,每个帖子都有一个带有“编辑、删除、报告”的下拉菜单。
我使用 Ant Design UI,问题是我无法访问子菜单中的 props 值“DeleteId”。
但我可以访问组件内的 props 值 (deleteId)。
根据 Ant Design here ,子菜单(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);
可能,它不知道子菜单中的“props”值
最佳答案
看来您只是缺少将 Prop 传递给 menu
功能组件。
下面是修改后的代码,用于将 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>
);
演示
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>
)
}
}
关于javascript - Ant Design Dropdown - 访问子菜单中的 props 值 [ React ],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52312620/