javascript - 你如何在 React 中使用 AntDesign List 上的 action 和 extra 属性？

Question

我正在尝试在我的 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 属性？

Answer 1

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>

Example