时间戳

首页 > 解决方案 > 在 React 中限制映射值的字符长度

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

问题描述

我有一个功能性反应组件，其中包含从映射数组显示的文本。如何将字符数限制{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>
  );
};

标签： reactjsarray.prototype.map

解决方案

简短而简单：

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

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

稍微长一点：

如果要...在截断字符串的末尾有条件地添加，可以执行以下操作：

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

推荐阅读