javascript - 如何在 .map 数组中调用函数?
问题描述
我正在通过道具传递一个函数,该道具将一些被映射的项目大写。我在 item.creator 的项目部分收到错误。我只是想知道为什么我收到错误并且不能只调用地图内的函数。谢谢你的帮助。
错误消息是行解析错误:意外的令牌,预期的“,”。
父组件
export default function MainContent() {
const techContent = useSelector(displayTechContent);
const designContent = useSelector(displayDesignContent);
const makeCapital = (words) => words.replace(/^\w/, (c) => c.toUpperCase());
return (
<div className="container">
<div className="topics-list">
<div className="topic-row mb-5">
<h2 className="topic-heading mb-4">Software Development</h2>
<ContentCard data={techContent} capitalize={makeCapital} />
</div>
子组件
export default (props) => (
<div>
<div className="resource-list">
{props.data.map((item) => (
<a key={item.id} href={item.link} className="resource-card-link mr-3">
<div className="card resource-card mb-2">
<div className="card-header">
<h4 className="resource-title">{item.title}</h4>
<span className="resource-creator">by: ***{props.capitalize({item.creator})}***.</span> <--this function
</div>
<div className="card-body py-3">
<div className="resource-description mb-2">
{item.description}
</div>
<div className="resource-type mb-2">
<i className="fas fa-book"></i> {item.type}
</div>
解决方案
of 周围的花括号item.creator
是多余的。
export default (props) => (
<div>
<div className="resource-list">
{props.data.map((item) => (
<a key={item.id} href={item.link} className="resource-card-link mr-3">
<div className="card resource-card mb-2">
<div className="card-header">
<h4 className="resource-title">{item.title}</h4>
<span className="resource-creator">by: ***{props.capitalize(item.creator)}***.</span> <--this function
</div>
<div className="card-body py-3">
<div className="resource-description mb-2">
{item.description}
</div>
<div className="resource-type mb-2">
<i className="fas fa-book"></i> {item.type}
</div>
推荐阅读
- sql - 更快的 SQL 语句 - 目前有一个缓慢的子查询 JOIN 会更快吗?
- hex - 这是什么文本:=B0=A1=C1=CB ...以及如何将其转换为普通文本?
- python - 在 python 中安装 Latex 以更改绘图的字体
- python - 如何将数组读入 matplotlib 图中?
- foreach - SwiftUI:如何在 ForEach 循环中不显示“case none”
- asp.net-core - 如何为 POST 方法控制器 net core 定义 ocelot 配置?
- java - 尝试将 AWS X-Ray 与 java spring @Scheduled 一起使用时收到 SubsegmentNotFoundException
- virtualization - 如何使用三星 PM1733/1735 NVMe SSD 设置 SR-IOV
- python - 删除熊猫字符串列中的重复字符?
- c# - C# Regex DataAnnotations 未检测到结束行