ReactJS中如何从JSON导入证书实现点击下载功能？

问题分析 #

你的代码存在两个核心问题：

1. 未传递证书路径参数：在Timeline组件渲染TimelineItem时，没有将JSON中的certificate属性传递给子组件，导致TimelineItem里的certificate值为undefined，下载链接无效。
2. React静态资源路径处理问题：直接使用JSON中的相对路径（./Documents/SSC.pdf）在React打包后可能无法正确指向文件，因为React会对src目录下的资源进行打包编译，路径会发生变化。

解决方案 #

第一步：修复参数传递问题

首先修改Timeline组件，在渲染TimelineItem时添加certificate参数：

import React from 'react';
import data from "../assets/data.json";

const Timeline = () => {
    return (
        <div id='timeline'>
            <div className="timelineBox">
                {data.projects.map((item, index) => (
                    {/* 添加certificate属性传递 */}
                    <TimelineItem 
                        heading={item.title} 
                        text={item.date} 
                        course={item.course} 
                        index={index} 
                        key={item.title}
                        certificate={item.certificate} // 新增这一行
                    />
                ))}
            </div>
        </div>
    )
}

// 其余代码不变
const TimelineItem = ({ heading, text, course, index, certificate }) => (
    <div className={`timelineItem ${index % 2 === 0 ? "leftTimeline" : "rightTimeline"}`}>
        <div className="timelineItemBox">
            {/* 设置download属性为证书原名，提升用户体验 */}
            <a href={certificate} download={certificate.split('/').pop()}>
                <h2 className='courseField'>{course}</h2>
            </a>
            <p>{heading}</p>
            <p className='date'>{text}</p>
        </div>
    </div>
)

export default Timeline

第二步：处理静态资源路径问题

根据你的资源存放位置，选择以下两种方案之一：

方案一：将证书文件放到public目录

React的public目录下的文件会被直接复制到打包后的根目录，路径不会被编译修改：

1. 将Documents文件夹移动到项目根目录的public文件夹下。
2. 修改data.json中的证书路径为以/开头的绝对路径（相对于public目录）：

{
    "projects": [
        {
            "date": "2017 - 2018",
            "title": "St. Patrick's School",
            "course": "S.S.C.",
            "certificate": "/Documents/SSC.pdf"
        },
        // 其余项同理修改路径
    ]
}

方案二：动态导入src目录下的证书文件

如果证书文件放在src目录下（比如src/assets/Documents），可以通过动态导入获取正确路径：

1. 修改data.json，只存储证书文件名：

{
    "projects": [
        {
            "date": "2017 - 2018",
            "title": "St. Patrick's School",
            "course": "S.S.C.",
            "certificate": "SSC.pdf"
        },
        // 其余项同理修改为文件名
    ]
}

2. 在Timeline组件中动态获取文件路径：

import React from 'react';
import data from "../assets/data.json";

const Timeline = () => {
    return (
        <div id='timeline'>
            <div className="timelineBox">
                {data.projects.map((item, index) => {
                    // 动态获取证书文件路径
                    const certPath = require(`../assets/Documents/${item.certificate}`).default;
                    return (
                        <TimelineItem 
                            heading={item.title} 
                            text={item.date} 
                            course={item.course} 
                            index={index} 
                            key={item.title}
                            certificate={certPath}
                        />
                    )
                })}
            </div>
        </div>
    )
}

// 其余代码不变
const TimelineItem = ({ heading, text, course, index, certificate }) => (
    <div className={`timelineItem ${index % 2 === 0 ? "leftTimeline" : "rightTimeline"}`}>
        <div className="timelineItemBox">
            <a href={certificate} download={certificate.split('/').pop()}>
                <h2 className='courseField'>{course}</h2>
            </a>
            <p>{heading}</p>
            <p className='date'>{text}</p>
        </div>
    </div>
)

export default Timeline

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