Question

我在下面有这个代码。当我点击链接时，如果它有类'home-link'，我想显示背景图像。如果没有该类，则不会显示任何图像。

问题是： 最初出现图像是因为css文件带来了它点击没有该类的链接后消失，我无法通过单击包含该类的链接返回图像。它与'background-color'完美配合，但不与'background-image'配合使用。我该如何解决？

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect, NavLink } from 'react- 
router-dom'

import Home from './Home';
import NotaBiografica from './Biografy';
import Portfolio from './Portfolio';

class MainMenu extends Component {
   constructor(props) {
   super(props)
   this.handleOnClick = this.handleOnClick.bind(this)
}
 handleOnClick(e) {

 if (e.target.classList.contains('home-link')) {
   e.target.parentNode.parentNode.parentNode.style.backgroundImage = 
  'url("images/col3_esq.gif")'  
   e.target.parentNode.parentNode.parentNode.style.backgroundColor = 'black'
 } else {
    e.target.parentNode.parentNode.parentNode.style.backgroundImage = 'none'
    e.target.parentNode.parentNode.parentNode.style.backgroundColor = 'green'
 }
}

render() {

return (
  <div>
    <Router>
      <div className="wrapper2">
        <nav className="menu-principal">
          <ul>
            <li><NavLink onClick={this.handleOnClick} className="home-link" activeClassName="active" exact to="/">home</NavLink></li>
            <li><NavLink onClick={this.handleOnClick} activeClassName="active" exact to="/biografy">biografy</NavLink></li>
            <li><NavLink onClick={this.handleOnClick} activeClassName="active" exact to="/portfolio">portfolio</NavLink></li>
          </ul>
        </nav>           
      </div>
    </Router>
   </div>
  )
 }
}

export default MainMenu

Answer 1

您可以创建两个css类，一个用于backgroundColor，另一个用于backgroundImage。

.backgroundColor = {
  background-color: "green"
}

.backgroundImage = {
  background-image: "image path"
}

您需要在渲染部分中使用

className={`home-link ${this.props.isActive? 'backgroundImage' : 'backgroundColor'}`}

Answer 2

我找到了解决方案。

我检查了React开发工具，我发现React会自动更改图片网址：

'URL（ “图像/ col3_esq.gif”）';

为：

'url（/static/media/col3_esq.2c4ef96b.gif）'

解决方案只是从react-dev-tool复制这个url并将其粘贴到您的脚本中。

示例：

e.target.parentNode
        .parentNode
        .parentNode
        .style
        .backgroundImage = 'url("/static/media/col3_esq.2c4ef96b.gif")'

切换背景图像 - 未显示图像

2 个答案: