Reactjs 为哈希链接添加React/Gatsby组件的id

我在导航栏中有一个链接，它将我带到索引页上的锚。目前我不知道如何在组件上添加id，所以我必须将组件包装在一个div中，并为它提供一个id，以便它工作。理想情况下，我想简单地将锚点放在组件本身上

这对我来说很好，但我想知道这是用React/Gatsby做锚的方法还是有更好的方法

//导航栏，它是布局的一部分
导出默认类导航栏扩展组件{
render（）{
返回(

家
关于
事件
博客
指导

加入我们


)
}
}
//主页
const IndexPage=（{data，location}）=>{
const{site，events，about，features，blogs}=data
const eventsEdges=events.edges
返回(
//不行
)
}

您必须将

id

作为

道具

传递给您的

JoinUs

组件。
首先，做

。现在，

id

是组件的道具

接合部

constjoinus=（{id}）=>(
…你的组件
);

其他方法

从“React”导入React
类JoinUs扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
…你的组件
);
}
}
导出默认JoinUs

这两种方法很相似，但第一种更为简洁。 行

JoinUs=（{id}）..

允许您访问和解构道具。您可以从

道具中获得属性
id
。现在，您不必用锚点将组件包装在
div
中

更多信息请点击此处：

const JoinUs = ({ id }) => (
    <div id={id}>
        ...Your component stuff
    </div>
);

import React from 'react'

class JoinUs extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id={this.props.id}>
                ... Your component stuff
            </div>
        );
    }
}

export default JoinUs