reactjs - 如何切换 antd Typography.Paragraph 省略号

标签 reactjs antd

我正在使用 <Typography.Paragraph>组件显示列表中某些项目的描述。我想将描述中的行数限制为 2。

现在我可以使用 ellipsis <Typography.Paragraph> 的 Prop 将描述限制为仅显示 2 行并将其设置为可扩展。但是,我似乎无法找到一种方法将文本折叠回带有省略号的 2 行 (...)

这是我当前代码的一个片段。

const listOfLongText = [.....];

listOfLongText.map((text,i) => {
    <Paragraph ellipsis={{ rows: 2, expandable: true }}> 
        {text}
    </Paragraph>
})

我知道 onExpand ellipsis 的回调Paragraph的 Prop 但不确定如何使用 onExpand 在展开和折叠功能之间切换

<Typography.Paragraph> API定义here


如果您需要更多信息,请发表评论,我会提供。

最佳答案

当前的antd版本(3.23.4)没有这个选项。

你需要通过状态来控制它,例如:

<Paragraph
  ellipsis={{
    rows: 3,
    expandable: true,
    onExpand: this.typoExpand
  }}
>
  Ant Design, a design language for background applications, is refined by Ant
  UED Team. Ant Design, a design language for background applications, is
  refined by Ant UED Team. Ant Design, a design language for background
  applications, is refined by Ant UED Team. Ant Design, a design language for
  background applications, is refined by Ant UED Team. Ant Design, a design
  language for background applications, is refined by Ant UED Team. Ant Design,
  a design language for background applications, is refined by Ant UED Team.
</Paragraph>;

Edit Q-58151314-ExpandEllipsis

关于reactjs - 如何切换 antd Typography.Paragraph 省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58151314/

相关文章:

javascript - 即使绑定(bind)后,this.setState 也不会设置状态 `this`

reactjs - 错误 "custom keyword definition is invalid: data.errors should be boolean"

javascript - 当值为 null/未定义时排序函数会中断(React、javascript)

javascript - React 中的组织结构图插件?

javascript - 如何将动态列和行数据推送到antd表

reactjs - 我想使用react和ant.design(antd)验证输入的密码

javascript - React - jsx --watch 在第一次转换后什么都不做

javascript - Antd 将初始值添加到来自 firebase 的动态表单

javascript - React Js - 点击ant design stepper时如何更改URL?

reactjs - 带有 React 钩子(Hook)表单的 Antd 表单