Typescript 带有react的验证函数

我试图用React做一个验证，用一个有几个按钮的页脚，然后每个按钮都有它的值（主页、订单、付款等），我希望当它位于其中一个按钮中时，它将被检查（我在css中已经有了），我还没有成功地设置正确的设置状态来实现它

接口状态{
价值：任何，
isActive:布尔值
}
类页脚扩展了React.PureComponent{
状态：状态={
值：“”，
isActive:错误
}
render（）{
const{isActive}=this.state
返回(
this.props.history.push（'/home'）}>
{isActive&&(
)}
{！isActive&&(
)}
...
this.props.history.push（'/orders'）}>
命令
);
}
}

基本上，当他在任何一个上面时，只在他站着的地方显示他是活跃的

---

我不知道如何告诉它，或者如何让示例按顺序获取我通过按钮传递的属性值。注意：看起来您也在使用一些路由库。这是有道理的，我建议你利用它来看看你的链接是否处于活动状态。 检查这个

尽管如此，您仍然可以通过以下方式实现当前功能：

// check if state/button value is same as the route pathname
const isActive = this.props.history.location.pathname.split('/')[1] === this.state.value 

// set value in button click handler
handleButtonClick = (value) => () => {
  this.setState({
    value
  }, () => {
    this.props.history.push(`/${value}`)
  })
}
<button onClick={handleButtonClick('home')} />

// conditionally render based on isActive
{isActive ? (
    <img src={iconHomeActive} alt="" />
) : (
    <img src={iconHomeInactive} alt="" />
)}

问题：如果你想传递一个className=“active”，你怎么能把一个条件放在移除时不显示更多的active呢

<button className={!!isActive && 'active'} onClick={handleButtonClick} />

onChangeInput做什么？这是我随身携带的东西，我已经尝试过去实现我想要的东西，这对我有一点作用，我只需要当你改变视图时，它不会在条件存在的地方显示为活动状态{isActive&&，如果没有，如果我离开该视图，它将关闭，我非常感谢您花费时间使用此函数。我可以通过按钮标签传递值吗？例如：值：“home”，如果您想传递className=“active”，你怎么能把一个条件，当删除时不显示更活跃？对不起，我是新的react@arthuroali刚刚更新的注释（参数“event”隐式具有“any”类型。类型“false |“active”不可分配给类型“string | undefined”。类型“false”不可分配给类型“string | undefined”。ts（2322）index.d.ts（1743,9）：预期的类型来自属性“className”，该属性在上声明type@arthuroali由于类型不正确，这些是与typescript相关的错误，您需要将其更改为基于typescript的代码

<button className={!!isActive && 'active'} onClick={handleButtonClick} />