限制 React 中映射值的字符长度
Limit character length of mapped value in React
我有一个功能性 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>
);
};
简短:
<p className={classes.details}>{item.description.substring(0, 250)}</p>
它将 return 包含 item.description
的前 250 个字符的子字符串(如果它短于 250 个字符,则为整个字符串)。
稍微长一点:
如果要在截断字符串的末尾有条件地添加...
,可以这样做:
<p className={classes.details}>
{item.description.length > 250 ?
`${item.description.substring(0, 250)}...` : item.description
}
</p>
我有一个功能性 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>
);
};
简短:
<p className={classes.details}>{item.description.substring(0, 250)}</p>
它将 return 包含 item.description
的前 250 个字符的子字符串(如果它短于 250 个字符,则为整个字符串)。
稍微长一点:
如果要在截断字符串的末尾有条件地添加...
,可以这样做:
<p className={classes.details}>
{item.description.length > 250 ?
`${item.description.substring(0, 250)}...` : item.description
}
</p>