React中使用.map生成部署页面链接的语法问题求助

DevOps 小满

2026-8-8

解决React中GitHub Pages部署URL拼接的语法错误

问题分析

你遇到的核心问题是JSX属性的语法使用错误：在JSX中，当需要给属性赋值JavaScript表达式时，必须将整个表达式包裹在{}中，不能混合使用字符串引号和零散的{}。你之前写的href='https://chrispyrice024.github.io/'+ {list.name} +'/'不符合JSX语法规范，所以会抛出意外令牌的错误。

正确的URL拼接写法

有两种可行的方式来正确拼接部署URL：

模板字符串写法（推荐，可读性更高）

href={`https://chrispyrice024.github.io/${list.name}/`}

字符串拼接写法

href={'https://chrispyrice024.github.io/' + list.name + '/'}

修正后的完整代码

import React from 'react';
import { useState, useEffect } from 'react';

export default function Repos () {
    const [list, setList] = useState([]);

    useEffect(() => {
        fetch('https://api.github.com/users/ChrispyRice024/starred?per_page=10')
            .then(response => response.json())
            .then(data => setList(data));
    }, []);

    return (
        <div>
            <h1>Top Repositories</h1>
            <ul>
                {list.map(repo => (
                    <li key={repo.id}>
                        <a href={`https://chrispyrice024.github.io/${repo.name}/`}>
                            {repo.name}
                        </a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

额外优化说明：