상태가 true로 설정되어 있으면 반응 쇼 이미지

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> 
    ) 
} 

에서이 함수를 호출 할 수 있습니다