React.js中如何通过props传递数组实现ResumeWorkItem列表动态渲染

第一步：修改ResumeWorkItem组件代码 #

1. 移除组件内部定义的空job数组，改为从props接收job参数，同时设置默认值为空数组，避免未传参数时报错
2. 调整map遍历的参数名，避免和props的job变量重名冲突

function ResumeWorkItem(props) {
    // 从props解构取值，job默认值为空数组兜底
    const { title, jobtitle, job = [] } = props;
    const JobList = job.map((jobItem, index) =>
        <li key={index}>
            {jobItem}
        </li>
    ); 
        
    return(
        <>
            <div className="res__work">
                <div>
                    <h2 className='res__work__title'> 
                        {title}
                    </h2>
                </div>
                <div>
                    <h3 className='res__work__jobtitle'>
                        {jobtitle}
                    </h3>
                </div>
                <div className='res__work__info'>
                    <ul>{JobList}</ul>
                </div>
            </div>
        </>
    );
}

第二步：在Resume.js中传入对应工作经历数组 #

直接在组件调用时新增job属性，传入对应要点数组即可，单个要点直接传长度为1的数组就行。

<section className="res-work-exp">
    <ResumeWorkItem 
        title = 'Title 1'
        jobtitle = 'Job Title 1'
        job={['单条工作要点内容']}
    />
    <ResumeWorkItem
        title='Title 2'
        jobtitle='Job Title 2'
        job={[
            '多条工作要点1',
            '多条工作要点2',
            '多条工作要点3'
        ]}
    />
</section>

如果工作要点列表会发生增删、排序操作，建议把key从索引替换为每个要点的唯一标识（比如自定义id），避免渲染异常。

内容的提问来源于stack exchange，提问作者Wimble