代码之家 › 专栏 › 技术社区 › Mel

如何在react中使用AntDesign列表上的action和额外属性?

antd reactjs javascript

Mel · 技术社区 · 5 年前

我正在尝试在我的react应用程序中使用Ant设计列表上的额外和操作功能。

我尝试过内外两个步骤列表.Item.Meta,尽管 documentation 将这些描述为上可用的属性列表项.

<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>
            // )
          )}
          />

外面列表.Item.Meta,它们只是作为文本打印。在里面,他们被忽略了。

tutorial 显示了如何在没有Meta的情况下使用它。

如何使用extra和action属性?

1 回复 | 直到 5 年前

Agney Sidharth yadav 5 年前

extra 和 actions 就像你说的是 List.Item 它本身,所以你可以提供它作为道具:

<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

Hemanthvrm 5 年前

它们只支持列表.项目

在每个组件的antd文档末尾,您可以检查项支持哪些属性。

若要在列表项中使用,请确保这些属性是以dis方式提供的,您将它们呈现为标记内的文本,而不是将它们用作属性

<List
            itemLayout="horizontal"
            dataSource={users}
            // renderItem={users.map(user => (
            renderItem={item => (
              <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}
                />


                  {/* 
                    actions={<Icon
                    type="close-circle"
                    theme="filled"
                    onClick={`${ROUTES.USEROVERVIEW}/${item.uid}`}
                  />}
                */}

              </List.Item>
            // )
          )}
          />