gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 16:29:39 27 4
gpt4 key购买 nike

我有一个功能性 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>

它将返回一个包含 item.description 的前 250 个字符的子字符串。 (或整个字符串,如果它短于 250 个字符)。

稍长:

如果你想有条件地添加 ...在截断字符串的末尾,您可以执行以下操作:
<p className={classes.details}>
{item.description.length > 250 ?
`${item.description.substring(0, 250)}...` : item.description
}
</p>

关于reactjs - 限制 React 中映射值的字符长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52427222/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com