我正在尝试在我的 React 应用程序中使用 Ant Design List 上的 extra 和 actions 功能。
我已经在 List.Item.Meta 内部和外部尝试了这两个步骤,尽管 documentation将这些描述为 List.Item 上可用的属性。
<List
itemLayout="horizontal"
dataSource={users}
// renderItem={users.map(user => (
renderItem={item => (
<List.Item key={item.uid}>
<List.Item.Meta
title={item.name}
description={item.organisation}
/>
extra={item.email}
actions={<Link
to={{
pathname: `${ROUTES.USEROVERVIEW}/${item.uid}`,
state: { item },
}}
>
More
</Link>
}
{/*
actions={<Icon
type="close-circle"
theme="filled"
onClick={`${ROUTES.USEROVERVIEW}/${item.uid}`}
/>}
*/}
</List.Item>
// )
)}
/>
在 List.Item.Meta 之外,它们只是作为文本打印。在内部,它们被忽略了。
这tutorial展示了它是如何在没有 Meta 的情况下使用的。
如何使用 extra 和 action 属性?
最佳答案
extra
和 actions
就像你说的那样是 List.Item
本身的属性,所以你可以将它作为 Prop 提供给它:
<List.Item key={item.uid}
extra={item.email}
actions={<Link to={{
pathname: `${ROUTES.USEROVERVIEW}/${item.uid}`,
state: { item },
}}
>
More
</Link>}
>
<List.Item.Meta
title={item.name}
description={item.organisation}
/>
</List.Item>
关于javascript - 你如何在 React 中使用 AntDesign List 上的 action 和 extra 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59340969/