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

Posted 2023-03-15

【中文标题】样式化的组件 选定的导航项

【英文标题】：Styled Components Selected Nav Item

【发布时间】：2019-07-08 00:47:51

【问题描述】：

我正在尝试学习基于道具的样式化组件的渲染。我只是想创建一个简单的导航栏。是的，我确实意识到您可以使用基于位置的 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>
    )
  

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

然后，在单击时，我将状态的 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

【问题讨论】：

1.您需要停止污染渲染方法，将 NAV 和 SPAN 移出渲染方法。

2.我不明白你的问题的逻辑，在你的代码中，我只看到状态控制 isActive，但是你根据道具改变颜色？你如何改变 props.selected 值？也就是说，state 控制 isAvtive，而 props 控制颜色？逻辑未连接。

嘿。我将组件移到了课堂之外。没错，我的逻辑有缺陷，这就是我发布问题寻求帮助的原因。我只希望 1 个组件基于点击处于活动状态。

【参考方案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