React.js - 导航链接单击以滚动减去导航高度

Question

我需要什么？

navigationLinkClick（） - ＆GT;将主体滚动到href（例如#competition） - 整个导航的高度

以最有效和正确的方式使用React.js

实施例

navigationLinkClick（） - ＆gt; （#competition .scrollTop（） - WholeNavigation .height（））

我的导航组件：

import React from 'react'

class Navigation extends React.Component {
  constructor () {
    super()

    this.state = {
      class: 'navigation',
      links: [
        {
          active: true,
          href: '#competition',
          link: 'Súťaž'
        },
        {
          href: '#conditions',
          link: 'Podmienky'
        },
        {
          href: '#',
          link: 'Ceny'
        },
        {
          href: '#',
          link: 'Dôležité termíny'
        }
      ]
    }
  }
  switchClick (event) {
    event.preventDefault()

    this.setState({
      class: this.state.class === 'navigation' ? 'navigation active' : 'navigation'
    })
  }
  navigationLinkClick (index, event) {
    let links = this.state.links

    links.map((link) => {
      link.active = false
    })

    let link = links[index]
    link.active = true

    this.setState({
      links
    })
  }
  render () {
    return (
      <div className={this.state.class}>
        <a onClick={this.switchClick.bind(this)} href='#' className='switch'>
          <div />
          <div />
          <div />
        </a>

        <div className='links'>
          {
            this.state.links.map((link, index) => {
              return (
                <a
                  onClick={this.navigationLinkClick.bind(this, index)}
                  key={index}
                  href={link.href}
                  className={link.active ? 'active' : ''}
                >
                  {link.link}
                </a>
              )
            })
          }
          <a href='#' className='button'>Nahrať plagát</a>
        </div>
      </div>
    )
  }
}

export default Navigation