Question

我这里有一个州，其中包含每个页面的文字：

this.state = {
  page: 0,
  weight: 'normal'
}

因此，只要点击下一个按钮，就会加载该特定页面的内容。

movePage() {
    this.setState({ page: +this.state.page + 1 });
  }

让我们说第1页我有一个h1标签，说这是第1页，第2页我有h2说这是第2页，等等。

但是，我还有一个导航列表，我需要通过重量状态更改字体重量。

所以基本上字体权重className默认是正常的，即：

.normal{
  font-weight: normal
}

但是每当点击下一个按钮时，该页面的列表项必须将其类更改为“粗体”

.bold{
  font-weight: bold;
}

如何在从第1页移动到3时使用两种状态逐步访问每个项目的className并逐步更改每个项目的className？

const list = (props) => {
  return(
<ul>
  <li><a href="#" className="{this.state.weight}">Page 1</a></li>
  <li><a href="#" className="{this.state.weight}">Page 2</a></li>
  <li><a href="#" className="{this.state.weight}">Page 3</a></li>
</ul>
)

}

例如：

if(this.state.page === 1){
  this.setState({
    weight: 'bold'
  })
}

然而，这个不起作用，因为它仅限于一个页面，但这必须动态地更改每页的每个列表项类。有什么想法吗？

Answer 1

此代码可以帮助您。它会根据您的页面添加要链接的课程

const list = props => {
 const page = this.state.page;
  return (
    <ul>
       <li><a href="#" className={page >= 1 ? "bold": "normal"}>Page 1</a></li>
       <li><a href="#" className={page >= 2 ? "bold": "normal"}>Page 2</a></li>
       <li><a href="#" className={page >= 3 ? "bold": "normal"}>Page 3</a></li>
    </ul>
  )
}

或者你可以做更多动态的方式

const list = props => {
  const page = this.state.page;
  const pages = ["page 1", "page 2", "page 3", "page 4"];
  return (
       <ul>
        {pages.map((item, index) => <li key={index}><a href="#" className={page >= index + 1 ? 'bold' : 'normal'}>{item}</a></li>)}
      </ul>
  )
}

Answer 2

如果您想根据页面构建内容，可以查看

react-transition-handler

Answer 3

你试过这个：

if(this.state.page += 1){
  this.setState({
    weight: 'bold'
  })
}

状态类似于道具，但它是私有的并且完全由组件控制。本地状态正是这样：一种仅适用于类的功能。

如何逐步在React中通过状态更改列表项类？

3 个答案: