[英]Using keys to call an array for an item list. React.js
我想说这是我第一次使用 Stack Overflow,如果我没有很好地解释这一点,我深表歉意,因为我不知道如何措辞。
我正在尝试在我的网站上制作一份带有工作清单的简历。 问题是我有一些有一个要点,而另一些有多个要点。 我想调用一个道具,它允许我更新 Resume.js 上的数组,但声明对其进行泛化,以便它创建一个列表,为每个单独的项目使用该数组。
我声明:
let job = []
因为我收到一个错误,指出它是未定义的,但我想使用 prop 或类似的东西来调用它来为每次调用 func 创建不同的数组。 恢复工作项。
function ResumeWorkItem(props)
{
{/*Trying to use JobList to create the array but I am not sure how to call it lower down.*/}
let job = []
const JobList = job.map((job, index) =>
<li key={index}>
{job.toString()}
</li>
);
return(
<>
<div className="res__work">
<div>
<h2 className='res__work__title'>
{props.title}
</h2>
</div>
<div>
<h3 className='res__work__jobtitle'>
{props.jobtitle}
</h3>
</div>
<div className='res__work__info'>
<ul>{JobList}</ul> {/*This is where I call JobList, but I want to set up job in Resume.js .*/}
</div>
</div>
</>
);
}
这是我想在文件 Resume.js 中调用数组的地方:
<section className="res-work-exp">
<ResumeWorkItem
title = 'Title 1'
jobtitle = 'Job Title 1'
{/* This is where I want to call array 1*/}
/>
<ResumeWorkItem
title='Title 2'
jobtitle='Job Title 2'
{/* This is where I want to call array 2*/}
/>
如果我没有很好地解释这一点,我深表歉意。 我发表了一些评论,看看这是否有助于理解我的观点。
我已经将JobList
变成了一个函数,用于接收可以按照您的建议映射的项目列表,然后从ResumeWorkItem
调用它。 如果需要,您还可以将ResumeWorkItem
移至 App.js 并导入JobList
。 考虑以下示例:
App.js
import React from 'react';
import './style.css';
import { ResumeWorkItem } from './Resume.js';
export default function App() {
return (
<section className="res-work-exp">
<ResumeWorkItem
title="Title 1"
jobtitle="Job Title 1"
joblist={[1, 2, 3]}
/>
<ResumeWorkItem title="Title 2" jobtitle="Job Title 2" />
</section>
);
}
Resume.js
import React from 'react';
export const JobList = (jobs) =>
jobs.map((job, index) => <li key={index}>{job.toString()}</li>);
export function ResumeWorkItem(props) {
return (
<>
<div className="res__work">
<div>
<h2 className="res__work__title">{props.title}</h2>
</div>
<div>
<h3 className="res__work__jobtitle">{props.jobtitle}</h3>
</div>
<div className="res__work__info">
<ul>{props.joblist ? JobList(props.joblist) : ''}</ul>
</div>
</div>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.