在 React 中限制映射值的字符长度

Posted 2023-02-14

【中文标题】在 React 中限制映射值的字符长度

【英文标题】：Limit character length of mapped value in React

【发布时间】：2019-02-24 21:20:40

【问题描述】：

我有一个功能性反应组件，其中包含从映射数组中显示的文本。如何将item.description 的字符数限制为 250 个字符？

 import React from "react";

 const Component = props => 
  const classes = props.classes;
  return (
    <div className=classes.container>
      <ul className=classes.items>
        props.children.map((item, i) => (
          <li key=i className=classes.item>
            <p className=classes.category>
              item.genre item.date
            </p>
            <p className=classes.header>item.header</p>
            <p className=classes.details>item.description</p>
          </li>
        ))
      </ul>
    </div>
  );
;

【参考方案1】：

简短：

<p className=classes.details>item.description.substring(0, 250)</p>

它将返回一个包含item.description 的前 250 个字符的子字符串（如果小于 250 个字符，则返回整个字符串）。

---

稍长：

如果你想有条件地在被截断的字符串末尾添加...，你可以这样做：

<p className=classes.details>
  item.description.length > 250 ?
    `$item.description.substring(0, 250)...` : item.description
  
</p>