样式化组件选定的导航项

Question

我正在尝试学习基于 props 的 Styled Component 的渲染。我只是想创建一个简单的导航栏。是的，我知道你可以通过使用基于位置的 React Router 来设置 links 活动。这对我来说更像是一次学习经历。

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>
    )
  }
}

我正在尝试通过更改文本颜色使 link 处于活动状态。当我映射 links 时，我提供导航，如果数组的索引等于活动状态，我使 link 活动。

然后，在点击时，我将状态的 isActive 更新为所选的索引。不用说，这是行不通的。我想地图的索引只在渲染时可用，在 onClick 事件中不可用。但是，我不确定要传递什么给 handleClick 函数。

该应用程序在我的本地环境中呈现得很好。我用这个例子制作了一个 Codepen，但它没有在那里呈现。我从来没有用过 Codepen for React，这里是 link: https://codepen.io/anon/pen/daqGQQ

此外，我意识到我可以使用 className 道具来制作 CSS class 来为选定的 link 提供活动状态，但是，我'我宁愿学习 'styled components' 方式。

如有任何帮助，我们将不胜感激。谢谢

编辑

根据评论重新格式化：

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

样式化组件选定的导航项

Styled Components Selected Nav Item

reactjs

styled-components