向 React/Gatsby 组件添加 id 以用于哈希链接答案

【问题标题】：Adding an id to React/Gatsby component for hash link向 React/Gatsby 组件添加 id 以用于哈希链接
【发布时间】：2019-04-01 13:19:53
【问题描述】：

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

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

//Navbar, which is part of Layout
export default class NavBar extends Component {
  render() {
    return (
      <NavContainer>
        <Menu>
          <ul>
            <li>Home</li>
            <li>About</li>
            <li>Events</li>
            <li>Blog</li>
            <li>Mentorship</li>
            <li>
              <Link to="/#join-us">Join Us</Link>
            </li>
          </ul>
        </Menu>
      </NavContainer>
    )
  }
}

//Homepage
const IndexPage = ({ data, location }) => {
  const { site, events, about, features, blogs } = data
  const eventsEdges = events.edges
  return (
    <Layout>
      <div id="join-us">
        <JoinUs /> //Can't do <JoinUs id="join-us"/>
      </div>
      <BlogList blogs={blogs} fromIndex={true} />
    </Layout>
  )
}

【问题讨论】：

标签： reactjs anchor router gatsby

【解决方案1】：

您必须将id 作为props 传递给您的JoinUs 组件。
首先，做<JoinUs id="join-us" />。现在，id 是您组件的一个道具。

JoinUs 组件

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

这两种方法相似，但第一种更简洁。 JoinUs = ({ id }) ... 行允许您访问和解构道具。您从props 获得财产id。现在，您不必将组件包装在带有锚点的 div 中

【讨论】：