如何在React中通过状态逐步修改列表项类及导航字体权重？

看起来你已经搭好了页面切换的基础逻辑，我来帮你把导航列表的字体权重控制也整合进去，分场景给你实现：

1. 先梳理基础页面切换逻辑 #

先把你现有的代码规整成可运行的组件结构，确保页面切换功能正常：

class PageViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      page: 0, 
      weight: 'normal' 
    };
    // 绑定方法确保this指向正确
    this.movePage = this.movePage.bind(this);
  }

  movePage() {
    this.setState({ 
      page: this.state.page + 1
      // 这里可以根据页面切换逻辑同步更新weight，后面结合导航再细化
    });
  }

  renderPageContent() {
    const pageNum = this.state.page + 1; // 初始page为0，对应第1页
    // 动态生成对应层级的标题标签
    const HeadingTag = `h${pageNum}`;
    return <HeadingTag>这是第{pageNum}页</HeadingTag>;
  }

  render() {
    return (
      <div>
        {this.renderPageContent()}
        <button onClick={this.movePage}>下一页</button>
        {/* 导航列表放在这里，下面补充实现 */}
      </div>
    );
  }
}

2. 导航列表结合weight状态的两种常见实现 #

场景一：当前活跃导航项加粗（用weight状态或索引标记） #

如果你的需求是点击导航项跳转到对应页面，同时当前页面的导航项字体加粗，可以这样做：

class PageViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      page: 0, 
      activeNavIndex: 0 // 用索引标记活跃项，也可以用weight状态单独控制，这里更灵活
    };
    this.movePage = this.movePage.bind(this);
    this.goToPage = this.goToPage.bind(this);
  }

  movePage() {
    const newPage = this.state.page + 1;
    this.setState({ 
      page: newPage,
      activeNavIndex: newPage
    });
  }

  goToPage(pageIndex) {
    this.setState({
      page: pageIndex,
      activeNavIndex: pageIndex
    });
  }

  renderPageContent() {
    const pageNum = this.state.page + 1;
    const HeadingTag = `h${pageNum}`;
    return <HeadingTag>这是第{pageNum}页</HeadingTag>;
  }

  render() {
    // 假设导航项列表
    const navItems = ['第1页', '第2页', '第3页', '第4页'];
    return (
      <div>
        {/* 导航列表 */}
        <ul style={{ listStyle: 'none', padding: 0, display: 'flex', gap: '1rem' }}>
          {navItems.map((item, index) => (
            <li 
              key={index}
              onClick={() => this.goToPage(index)}
              style={{ 
                cursor: 'pointer',
                // 根据活跃索引设置字体权重，对应你的weight状态需求
                fontWeight: this.state.activeNavIndex === index ? 'bold' : this.state.weight
              }}
            >
              {item}
            </li>
          ))}
        </ul>

        {/* 页面内容 */}
        {this.renderPageContent()}
        <button onClick={this.movePage}>下一页</button>
      </div>
    );
  }
}

场景二：全局控制导航字体粗细 #

如果你的需求是通过weight状态统一修改所有导航项的字体权重（比如一键切换所有导航项变粗/正常），可以这样实现：

class PageViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      page: 0, 
      weight: 'normal' 
    };
    this.movePage = this.movePage.bind(this);
    this.toggleNavWeight = this.toggleNavWeight.bind(this);
  }

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

  toggleNavWeight() {
    this.setState({
      weight: this.state.weight === 'normal' ? 'bold' : 'normal'
    });
  }

  renderPageContent() {
    const pageNum = this.state.page + 1;
    const HeadingTag = `h${pageNum}`;
    return <HeadingTag>这是第{pageNum}页</HeadingTag>;
  }

  render() {
    const navItems = ['第1页', '第2页', '第3页', '第4页'];
    return (
      <div>
        {/* 导航列表，用weight状态控制全局字体权重 */}
        <ul style={{ listStyle: 'none', padding: 0, display: 'flex', gap: '1rem', fontWeight: this.state.weight }}>
          {navItems.map((item, index) => (
            <li 
              key={index}
              onClick={() => this.setState({ page: index })}
              style={{ cursor: 'pointer' }}
            >
              {item}
            </li>
          ))}
        </ul>

        {/* 切换导航字体粗细的按钮 */}
        <button onClick={this.toggleNavWeight}>切换导航字体粗细</button>

        {/* 页面内容 */}
        {this.renderPageContent()}
        <button onClick={this.movePage}>下一页</button>
      </div>
    );
  }
}

几个关键小提醒 #

• 动态生成标题标签时，变量名要大写开头（比如HeadingTag），React才会把它识别为组件而非普通字符串
• 方法绑定一定要做，要么在构造函数里绑定，要么用箭头函数定义方法，避免this指向错误
• 如果是多导航项的活跃状态控制，用索引标记比单独的weight状态更灵活，当然你也可以根据需求调整逻辑

内容的提问来源于stack exchange，提问作者user6398538