Добавление идентификатора в компонент React / Gatsby для хэш-ссылки - PullRequest
Новая
       6

Добавление идентификатора в компонент React / Gatsby для хэш-ссылки

0 голосов
/ 28 октября 2018

У меня есть ссылка в навигационной панели, которая ведет меня к якору на странице индекса.В настоящее время я не знаю, как поместить идентификатор в компонент, поэтому мне нужно обернуть компонент в элемент div и дать ему идентификатор, чтобы он работал.В идеале я хотел бы просто поставить привязку на сам компонент.

Это хорошо работает для меня, но мне интересно, если это способ сделать привязку с 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>
  )
}

1 Ответ

0 голосов
/ 28 октября 2018

Вы должны передать 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 }) ... позволяет вам получить доступ и деструктурировать реквизит.Вы получаете собственность id от вашего props.Теперь вам не нужно оборачивать свой компонент в div с помощью привязки

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

...