Реагируйте на клик, получая встроенный стиль

Question

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

class Sidebar extends Component {
    state = {
      navActive : '0'
    }

  render () {
    return (
      <NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}}>
        <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
       لوگو اینجا قرار بگیرد
        </NavTitle>
        <NavSection>
          <NavSectionTitle />
          <NavSectionTitle />

          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />} 

          className={this.state.navActive === '2' ? 'active' :' ' }

          onClick={() => this.setState({ navActive:'2' }, style={{ borderStyle:'solid',
          borderWidth:'0px 10px 0px 0px',
          borderColor:'green'}})}>

           داشبورد
          </NavLink>

        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

Answer 1

Второй параметр setState - это обратный вызов, выполняемый после изменения состояния.

Таким образом, вы должны указать свой стиль в зависимости от состояния.

      <NavLink key='2' rightEl={<GiIceCube style={linkStyles.Icon} />} 

      className={this.state.navActive === '2' ? 'active' :' ' }

      onClick={() => this.setState({ navActive:'2' })}
      style={ this.state.navActive !== '2' ? {linkSyles.base} : {
      ...linkStyles.base,
      borderStyle:'solid',
      borderWidth:'0px 10px 0px 0px',
      borderColor:'green'}
      }
       >