Question

我想在某些页面上呈现两个导航按钮（浅色版和深色版）。

我尝试在构造函数中设置状态，并根据页面路径生成图像的链接，但有时会生成错误的图像链接。似乎它是基于生成的第一页获得状态。例如，如果“home”应该具有按钮的简易版本，那么我点击的任何其他链接都会生成徽标的简易版本，除非我刷新。如果“约”应该是徽标的黑暗版本，我点击的所有其他页面都将具有黑暗版本，除非我刷新。

为什么在自然地点击并浏览不同的页面时它不能正常生成？

MenuButton.js

import React, { Component } from 'react'; 

export default class MenuButton extends Component {

  constructor() {
    super();
    this.state = {
      logo_url: ''
    }
  }

  componentDidMount() {
    let currentPath = window.location.pathname;

    if (!currentPath.includes('about') && !currentPath.includes('news') 
        && !currentPath.includes('work')) {
          this.setState({ logo_url: `${require('../../assets/nav/logo-light.svg')}` });
    } else {
      this.setState({ logo_url: `${require('../../assets/nav/logo-dark.svg')}` });
    }
  }

  render() {
    return (
      <div className="menu-btn--cntr">
        <img src={this.state.logo_url} />
      </div>
    )
  }
}

Answer 1

您不需要使用状态和生命周期。

您可以尝试以下内容 -

import React, { Component } from 'react'; 

export default class MenuButton extends Component {

  constructor() {
    super();
    this.state = {
      logo_url: ''
    }
  }

  getButton() {
    let currentPath = window.location.pathname;
    let btnUrl = ''; // or set some default 
    if (!currentPath.includes('about') && !currentPath.includes('news') 
        && !currentPath.includes('work')) {
          // this.setState({ logo_url: `${require('../../assets/nav/logo-light.svg')}` });
            btnUrl = `${require('../../assets/nav/logo-light.svg')}`;
    } else {
      // this.setState({ logo_url: `${require('../../assets/nav/logo-dark.svg')}` });
      btnUrl = `${require('../../assets/nav/logo-light.svg')}`;
    }
    return btnUrl;
  }

  render() {
    const btnUrl = this.getButton();
    return (
      <div className="menu-btn--cntr">
        <img src={btnUrl} />
      </div>
    )
  }
}

条件渲染无法在不同组件上可靠地设置状态

1 个答案: