javascript - 如果状态设置为 true，则 React 显示图像

Question

我试图默认隐藏图像，仅在元素悬停时才显示它。我已经能够设置默认状态等。唯一的问题是创建一个 if 语句来显示和隐藏图像。

这是组件:

import React from 'react';
import { Link } from 'react-router';

import Eyecon from '../../static/eye.svg';


class Item extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Item';
        this.handleHover = this.handleHover.bind(this);
        this.state = {
            hover: false
        };
    }
    mouseOver() {
        this.state.hover = true;
    }
    mouseOut() {
        this.state.hover = false;
    }
    handleHover() {
        console.log("hover");
    }
    render() {
      const { item, i } = this.props;
        return (
            <div className="grid-box">
                <img src={Eyecon}/>
            </div>
        )
    }
}


export default Item;

我尝试了一些方法，但也想看看最佳实践是什么。

感谢您的宝贵时间

Answer 1

有多种方法，我会这样做:

render() {
  const { item, i } = this.props;
    return (
        <div className="grid-box">
            {this.state.hover ? (
                <img src={Eyecon} />
            ) : null}
        </div>
    )
}

但是您也可以将图像渲染抽象为一个单独的函数，并且在需要时不返回任何内容。

Sitenote:您不应该直接改变状态。使用 this.setState() 函数。否则组件将不会被重新渲染。

另外，我可以问为什么你不只使用 css :hover 来实现此行为吗？