Стилизованные компоненты Выбранный элемент Nav

Question

Я пытаюсь изучить рендеринг Styled Component на основе реквизита.Я просто пытаюсь создать простую панель навигации.Да, я понимаю, что вы можете установить активные ссылки, используя React Router, в зависимости от местоположения.Для меня это больше просто опыт обучения.

class Nav extends Component {
  constructor (props) {
    super(props)

    this.state = {
      isActive: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick (n) {
    console.log('Hello There')

    this.setState = {
      isActive: n
    }
  }

  render () {
    const NAV = styled.div`
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      background-color: black;
    `
    const SPAN = styled.span`
      font-size: 3.5vmin;
      cursor: pointer;
      color: white;
      ${props =>
    props.selected &&
        css`
          color: cornflowerblue;
        `}
    `
    const TEXT = styled.p``

    return (
      <NAV links={this.props.links}>
        {this.props.links.map((i, ii) => (
          <SPAN
            onClick={e => this.handleClick(ii)}
            key={ii}
            selected={this.state.isActive === ii ? true : ''}
          >
            <TEXT>{i}</TEXT>
          </SPAN>
        ))}
      </NAV>
    )
  }
}

Я пытаюсь сделать ссылку активной, изменив ее цвет текста.Когда я отображаю ссылки, я предоставляю Nav, если индекс массива равен активному состоянию, я делаю эту ссылку активной.

Затем, при нажатии, я обновляю isActive состояния до индекса, который былвыбран.Излишне говорить, что это не работает.Я думаю, что индекс карты доступен только при рендере, а не при событии onClick.Однако я не уверен, что передать функцию handleClick.

Приложение прекрасно работает в моей локальной среде.Я сделал Codepen с примером, но он не рендерит там.Я никогда не использовал Codepen for React, вот ссылка: https://codepen.io/anon/pen/daqGQQ

Кроме того, я понимаю, что могу использовать реквизит className, чтобы сделать класс CSS, чтобы придать выбранной ссылке активный статус,но я бы лучше выучил способ «стилизованных компонентов».

Любая помощь будет высоко ценится.Спасибо

РЕДАКТИРОВАТЬ

Переформатировать на основе комментария:

import React, { Component } from 'react'
import styled, { css } from 'styled-components'

const NAV = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  background-color: black;
`
const SPAN = styled.span`
  font-size: 3.5vmin;
  cursor: pointer;
  color: white;
  ${props =>
    props.selected &&
    css`
      color: cornflowerblue;
    `}
`
const TEXT = styled.p``

class Nav extends Component {
  constructor (props) {
    super(props)

    this.state = {
      isActive: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick (e) {
    console.log('Hello There')
    console.log(e.target.key)

    this.setState = {
      isActive: 1
    }
  }

  render () {
    return (
      <NAV links={this.props.links}>
        {this.props.links.map((i, ii) => (
          <SPAN
            id={ii}
            onClick={e => this.handleClick(e)}
            key={ii}
            selected={this.state.isActive === ii ? true : ''}
          >
            <TEXT>{i}</TEXT>
          </SPAN>
        ))}
      </NAV>
    )
  }
}

export default Nav

Answer 1

Я понял это с помощью e.currentTarget.textContent, а затем установил состояние isSelected: e.currentTarget.textContent onClick.Код:

import React, { Component } from 'react'
import styled, { css } from 'styled-components'

const NAV = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  background-color: black;
`
const SPAN = styled.span`
  font-size: 3.5vmin;
  cursor: pointer;
  color: white;
  ${props =>
    props.selected &&
    css`
      color: cornflowerblue;
    `}
`
const TEXT = styled.p``

class Nav extends Component {
  constructor (props) {
    super(props)

    this.state = {
      isSelected: 'Home'
    }
    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount () {}

  handleClick (e) {
    this.setState({
      isSelected: e.currentTarget.textContent
    })
  }

  render () {
    return (
      <NAV links={this.props.links}>
        {this.props.links.map((i, ii) => (
          <SPAN
            id={ii}
            onClick={e => this.handleClick(e)}
            key={ii}
            selected={this.state.isSelected === i ? true : ''}
          >
            <TEXT>{i}</TEXT>
          </SPAN>
        ))}
      </NAV>
    )
  }
}

export default Nav