Reactjs 选定导航项的样式化组件

我试图学习基于道具的样式化组件的渲染。我只是想创建一个简单的导航栏。是的，我知道你可以通过使用基于位置的React路由器来激活链接。这对我来说更像是一次学习经历

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

类导航扩展组件{
建造师（道具）{
超级（道具）
此.state={
i活动：0
}
this.handleClick=this.handleClick.bind（this）
}
把手舔（n）{
log（'Hello here'）
this.setState={
i活动：n
}
}
渲染（）{
const NAV=styled.div`
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
宽度：100%；
背景色：黑色；
`
const SPAN=styled.SPAN`
字体大小：3.5vmin；
光标：指针；
颜色：白色；
${props=>
道具&&
css`
颜色：矢车菊蓝；
`}
`
const TEXT=styled.p``
返回(
{this.props.links.map（（i，ii）=>(
这个.handleClick（ii）}
key={ii}
所选={this.state.isActive===ii？真：“”
>
{i}
))}
)
}
}

我试图通过更改链接的文本颜色来激活链接。当我在链接上映射时，我提供导航，如果数组的索引等于活动状态，我将激活该链接

然后，单击一次，我将状态的isActive更新为所选的索引。不用说，它不起作用了。我猜贴图的索引仅在渲染时可用，而在onClick事件时不可用。但是，我不确定传递handleClick函数的是什么

该应用程序在我的本地环境中呈现良好。我用这个例子做了一个代码笔，但它没有在上面渲染。我从未将Codepen用于React，以下是链接：

此外，我意识到我可以使用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

import React，{Component}来自“React”
导入样式化，{css}来自“样式化组件”
const NAV=styled.div`
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
宽度：100%；
背景色：黑色；
`
const SPAN=styled.SPAN`
字体大小：3.5vmin；
光标：指针；
颜色：白色；
${props=>
道具&&
css`
颜色：矢车菊蓝；
`}
`
const TEXT=styled.p``
类Nav扩展组件{
建造师（道具）{
超级（道具）
此.state={
i活动：0
}
this.handleClick=this.handleClick.bind（this）
}
handleClick（e）{
log（'Hello here'）
console.log（e.target.key）
this.setState={
行动：1
}
}
渲染（）{
返回(
{this.props.links.map（（i，ii）=>(
this.handleClick（e）}
key={ii}
所选={this.state.isActive===ii？真：“”
>
{i}
))}
)
}
}
导出默认导航

我使用e.currentTarget.textContent，然后将状态设置为Selected: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

import React，{Component}来自“React”
导入样式化，{css}来自“样式化组件”
const NAV=styled.div`
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
宽度：100%；
背景色：黑色；
`
const SPAN=styled.SPAN`
字体大小：3.5vmin；
光标：指针；
颜色：白色；
${props=>
道具&&
css`
颜色：矢车菊蓝；
`}
`
const TEXT=styled.p``
类Nav扩展组件{
建造师（道具）{
超级（道具）
此.state={
我当选：“家”
}
this.handleClick=this.handleClick.bind（this）
}
componentDidMount（）{}
handleClick（e）{
这是我的国家({
isSelected:e.currentTarget.textContent
})
}
渲染（）{
返回(
{this.props.links.map（（i，ii）=>(
this.handleClick（e）}
key={ii}
selected={this.state.isSelected==i？true:'}
>
{i}
))}
)
}
}
导出默认导航

1。您需要停止污染渲染方法，将NAV和SPAN移出渲染方法。2。我不明白你问题的逻辑，在你的代码中，我只看到控制isActive的状态，但是你根据道具改变颜色？如何更改道具的选定值？换句话说，国家控制的是虚拟的，但是道具控制的是颜色？逻辑没有联系。我把组件移到了课外。没错，我的逻辑是有缺陷的，这就是为什么我要发帖寻求帮助。我只希望1个组件基于onClick处于活动状态。