添加带有url的achor，同时将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链接。

下面是我是如何创建Project元素的。

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>
    );
}

所有其他的pros.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