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

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

antd reactjs javascript

Mel · 技术社区 · 6 年前

我正在尝试在我的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 回复 | 直到 6 年前

Agney Sidharth yadav 6 年前

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 6 年前

它们只支持列表.项目

在每个组件的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>
            // )
          )}
          />

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前