反應 onClick 接收內聯樣式

Question

我正在嘗試在 React 中編寫一個側邊欄，當我單擊該側邊欄的每個元素時，它會被激活。 但是，我想用內聯樣式覆蓋默認的 UI 庫活動 styles，但是我在 onClick function 中的代碼沒有編譯並給我一個錯誤。 這個怎么做？

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的第二個參數是 state 更改后執行的回調。

所以你必須根據 state 來指定你的風格。

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