Question

嗯，我得到了一个电子商务组件页面，该页面必须在单击某些特定菜单按钮后更改其状态，然后呈现某些产品类型。对于所有产品类别，我只有一个组件，因此，通过更改状态，我也想更改react-router中的链接。如何通过更改状态来更改组件的链接？

所以，我做了什么。首先，我在状态中添加了url参数：

state = {
productType1: false,
productType2: false,
link: ' '
}

此处是功能，这些功能会更改主要组件的状态。在这里，我还有一个具有所需值的网址。

showProductType1= () => {
this.setState(() => {
  return {
    productType1: true,
    productType2: false,
    link: '/product_type1',
  }
})
}

showProductType2= () => {
this.setState(() => {
  return {
    productType2: true,
    productType1: false,
    link: '/product_type2',
  }
})
}

然后我将所有这些作为道具传递给主要组件，该组件负责显示不同的产品类型。

<Route exact path={this.state.link} render={(props) => 
 <ProductList {...props} 
 productType1={this.state.productType1} 
 productType2={this.state.productType2}/>
 }>
</Route>

功能进入导航栏组件，因此在单击特定菜单后状态可以更改。

<Navbar 
showProductType1 = {this.showProductType1} 
showProductType2 = {this.showProductType2} 
link={this.state.link}/>

嗯，一切正常，但没有正常进行。当我单击导航栏菜单时，状态（组件显示正确的产品类型）和链接都发生了变化，但是只有在我两次单击菜单按钮之后才发生变化。只需单击一下，什么都没有发生，组件不会更新，链接也不会更改。但是，如果我再单击一次菜单按钮-一切开始工作，状态就会随着所需的URL一起改变。

那么，如何更改组件的显示链接及其状态？预先感谢，社区成员

Answer 1

我建议使用ternary operator。为了保持代码高效。

例如。

var link = this.state.showProductType1 ? this.state.showProductType1Link : this.state.showProductType2Link

意味着，如果showProductType1的变量为true，则它将使用该链接。如果不正确，则下一个值为showProductType2Link。

如何通过更改组件的状态来更改组件的URL？

1 个答案: