我有一个功能性的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>
);
};
答案 0 :(得分:2)
简洁:
<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>