Javascript 如何通过React中的状态更改列表项类？

我在这里有一个包含每页文本的状态：

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

因此，无论何时单击“下一步”按钮，都会加载该特定页面的内容

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

让我们假设对于第1页，我有一个h1标记，表示这是第1页，在第2页，我有h2标记，表示这是第2页，以此类推

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

因此基本上字体权重类名称默认值是正常的，即：

.normal{
  font-weight: normal
}

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

.bold{
  font-weight: bold;
}

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

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>
)

}

---

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

如果你想基于页面构建一些东西，你可以看看

---

此代码将帮助您。它将根据您的页面添加类链接

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

const list=props=>{
const page=this.state.page；
常量页=[“第1页”、“第2页”、“第3页”、“第4页]；
返回(

{pages.map（（项，索引）=>）}

)
}

那么如何设置默认类？让我们说“普通”类？基本上我只想在页面与页码相等时覆盖列表项的现有类，但它必须保留上一个粗体类，然后添加此代码

它再次将默认类设置为normalHi paterapan，是的，我不理解这一点，但我要说的是，每当它通过每个列表项时，它必须保留粗体类，并且不能返回默认的普通类？假设我单击了第2页的“下一步”按钮，那么粗体类必须同时出现在第1页和第2页上，而不仅仅出现在第2页上

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