我有一个列表,例如facebook feed,每个帖子都有一个带有“ edit,delete,report”的下拉列表。
我使用Ant Design UI,问题是我无法在子菜单中访问道具值“ DeleteId”。
但是我可以在组件内部访问props值(deleteId)。
根据Ant Design here,子菜单(菜单)在组件外部声明。
//-------------- 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);
可能不知道子菜单中的“道具”值
答案 0 :(得分:4)
似乎您只是缺少将道具传递给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>
);
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>
)
}
}