Question

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

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

然后，在onClick上，我将状态的isActive更新为所选的索引。不用说，它不起作用。我猜地图的索引仅在渲染时可用，而在onClick事件上不可用。但是，我不确定该如何传递handleClick函数。

该应用程序可以在我的本地环境上正常渲染。我用示例制作了一个Codepen，但是没有在此处渲染。我从没用过Codepen for React，这是链接：https://codepen.io/anon/pen/daqGQQ

此外，我意识到我可以使用className属性创建CSS类，以使所选链接处于活动状态，但是，我宁愿学习“样式化组件”方式。

任何帮助将不胜感激。谢谢

EDIT

根据评论重新格式化：

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

样式化组件选择的导航项目

1 个答案: