javascript - 添加带有 url 的 anchor ，同时将 url 作为属性传递

Question

我正在尝试通过属性将 url 传递给 href。

我正在尝试将 {props.github} 传递给 href。但它不起作用。

我创建了一个属性对象，其中包含一个名为 github 的属性。如下所示。

export const projectList = [
{   title: 'Title',
    github: 'https://github.com/',
    summary: 'Summary.'
},
{   title: 'Title',
    github: 'https://github.com/',
    summary: 'Summary.'
}];

export default Project;

这就是我尝试执行此操作的方式，但是当我单击 GitHub 时，没有打开任何页面。

github 文本不可点击，也不会将我重定向到 github 页面。

我希望可以点击此文本并将我重定向到 github 链接。

下面是我如何创建项目元素。

const Project = (props) => {
    return(
         <div className='bg-navy ba bw1 b--dark-blue dib pa4 ma1 br3 grow shadow-5'> 
            <img className='b' alt='Photo' src='' />
            <div>
                <h2 className='light-blue '>{props.title}</h2>
                <p className='washed-blue'>{props.summary}</p>
                <a href={props.github} >GitHub</a> ////// THIS LINE
            </div>
        </div>
    );
}

所有其他 props.x 工作正常。

这就是我将 projectList 传递到项目元素的方式。

import React from 'react';
import Project from './Project.js'

const CardList = ({projectList}) => {
    const cardDraw = projectList.map((proj, i) => {
        return <Project key={i} title={projectList[i].title} title={projectList[i].github} summary={projectList[i].summary}/>
    })
    return (
        <div>
            {cardDraw}

        </div>
    );
}

export default CardList;

Answer 1

问题是您在父级中使用属性名称link，在子级中使用属性名称github