Question

我希望为我悬停的每个链接显示不同的图像。当我将鼠标悬停在每个链接上时，两个图像都显示在彼此的顶部。我觉得我的问题似乎源于条件，它将显示我放置在其中的任何图像，而不仅仅是一个特定的图像。

我想知道是否有更好的方法。也许将图像保存在状态内？

我的代码：

class PhotoIndex extends Component {
state = {
    hover: false
}

mouseOver = () => {
    this.setState({ hover: true })
}

mouseOut = () => {
    this.setState({ hover: false })
}

render() {
    return (
        <Wrapper>
            <IndexWrapper>
                <li>
                    <StyledLink
                        onMouseOver={this.mouseOver}
                        onMouseOut={this.mouseOut}
                        to="/checkered-flag/">Checkered Flag

                        {this.state.hover
                            ?
                            <Fade >
                                <div style={{ position: 'relative' }}>
                                    <img 
                                        style={{ position: 'absolute', top: '-200px', left: '100%' }} 
                                        src={car14} 
                                        alt="red car parked in a parkin lot" 
                                    />
                                </div>
                            </Fade>
                            : null}
                    </StyledLink>
                </li>
                <li>
                    <StyledLink
                        onMouseOver={this.mouseOver}
                        onMouseOut={this.mouseOut}>
                        Birds Nest  

                        {this.state.hover
                            ?
                            <Fade >
                                <div style={{ position: 'relative' }}>
                                    <img 
                                        style={{ position: 'absolute', top: '-200px', left: '100%' }} 
                                        src={car15} 
                                        alt="blue car parked in a grassy field" 
                                    />
                                </div>
                            </Fade>
                            : null}                         
                    </StyledLink>
                </li>
                <li>
                    <StyledLink>The Grand Turret</StyledLink>
                </li>
                <li>
                    <StyledLink>Simulation Theory</StyledLink>
                </li>
            </IndexWrapper>
        </Wrapper>
    )
}

}

Answer 1

我将尝试简化代码以解释解决方案。如果您希望使用此解决方案，则应使用固定的结构对图像进行编号。例如car0.jpg，car1.jpg，car2.jpg .....

ImageGetter.js

import car1 from './cars/car1.jpg';
import car2 from './cars/car2.jpg';

export default {
  car1,car2
}

在上面的代码中，我将导入图像并将其导出，以便使用ImageGetter对象的任何组件都可以使用它们。

PhotoIndex.js

import ImageGetter from './ImageGetter';

class PhotoIndex extends Component {
  constructor() {
    super();
    this.state = {
      carImgNum: '0',
      hover: false
    }
  }

  mouseOver = () => {
    const max = 5; //Max number of images
    const newcarImgNum = Math.floor(Math.random() * Math.floor(max));
    this.setState({ hover: true, carImgNum: newcarImgNum });
  }

  render() {
    const { carImgNum } = this.state;
    return (
        <div onMouseOver={this.mouseOver}>
          <img src={ImageGetter[`car${carImgNum}`]} alt="" />
        </div>
    )
  }
}

export default PhotoIndex;

您将必须为要显示的图像编号创建默认状态。在此处显示的默认图像为car0.jpg。

在mouseOver函数中，您将必须定义可用的图像数量。（您也可以使用其他功能来使图像数量动态化。）。然后，它将创建一个从0到您指定的最大数的随机数，并将其值设置为carImgNum状态。

在render方法中，我正在解构状态以获得carImgNum值。

然后我将ImageGetter传递到image标签的src中，并使用模板字符串动态定位需要传递的图像。

在React中的onMouseOver上显示不同的图像

1 个答案: