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

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

  •  1
  • Matt  · 技术社区  · 7 年前

    {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 回复  |  直到 7 年前
        1
  •  4
  •   Chris    7 年前

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

    它将返回一个包含前250个字符的子字符串 item.description


    略长:

    ... 在截断字符串的末尾,可以执行以下操作:

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