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来实现这种行为？

Answer 2

我通常喜欢在辅助函数中处理内容的条件显示，如下所示：

function renderImage() {
    const { hover } = this.state;

    if (hover) {
        return (
            <img src={Eyecon} />
        );
    }
}

然后，您可以从render()

调用此函数

render() {
    const { item, i } = this.props;
    return (
        <div className="grid-box">
            {renderImage.call(this)}
        </div>
    )
}

如果state设置为true，则反映显示图像

2 个答案: