React를 사용하여 다른 것이 필요하지 않고 다시 사용할 수 있는 도구 알림 구성 요소를 만드는 방법

편집자: 그래, 출판 후에 나는'다른 것이 없다'는 것이 과장이라는 것을 깨달았다.CSS도 많고.다른 의존은 없어요.🙈
툴팁은 UI에 컨텍스트를 추가하는 가장 좋은 방법입니다.
최근에 나는 어쩔 수 없이 업무 중에 그것들을 대량으로 사용해야 한다.나는 상당히 게으른 사람이기 때문에 그것을 더욱 쉽게 하기 위해 <Tooltip /> 구성 요소를 만들었다. 나는 그것으로 거의 모든 것에 도구 알림을 추가할 수 있다.
그것은 자신의 반응을 제외하고는 의존성이 없는 무한 부품이다.
여기에 적용되는 대부분의 모델은 유일한 반응 모델이 아니기 때문에 당신이 좋아하는 반응이 아니더라도 새로운 것을 배울 수 있습니다.🙂
세부 사항에 들어가기 전에 다음과 같은 프레젠테이션이 있습니다.

어떻게
이 구성 요소가 이렇게 우수한 이유는 좋은 CSS 마법과 React children의 유연성을 이용했기 때문이다.우리는 Tooltip.css과 Tooltip.js 두 개의 문서만 있으면 일을 할 수 있다.
우리 먼저 그것의 CSS에 대해 이야기합시다.

도구 설명.css
여기에는 몇 가지 기교가 있다.

색상, 간격 및 화살표 크기를 제어하는 사용자 정의 속성(CSS 변수)

CSS 베젤 삼각형 및 before 유사 요소로 구성된 화살표

일부 지능적인 절대 포지셔닝과 포장, 모든 물건을 정확한 위치에

Tooltip.css 파일을 보십시오.
이 중 절반은 도구 알림을 다른 방향으로 표시하기 위한 것입니다.CSS 프로세서는 코드를 더욱 간소화할 수 있지만, 우리는 간단함을 유지한다는 것을 명심하십시오.Tooltip.css의 가장 큰 수확은 <Tooltip>으로 React 부품을 포장함으로써 우리도 Tooltip-Wrapper류 디자인의 요소로 포장하는 것이다.
CSS 클래스는 position: relative 앵커 툴팁의 위치를 사용합니다.이렇게 하면 각 툴팁에 position: absolute과 포장할 요소와 관련된 top, right, bottom 및 left 값을 사용할 수 있습니다.
현재 우리는 Tooltip.css 처리 도구 알림의 외관과 위치를 이해했으니 .js에 대응하는 도구 알림에 대해 토론합시다.

도구 설명.jsTooltip.js은 네 가지 중요한 일을 했습니다.

은 <Tooltip> 구성 요소의 모든 내용을 가져오고 div을 사용하여 Tooltip-Wrapper 클래스에서 이동합니다.

제어 툴을 사용하여 풍선 도움말

은 기포가 나타나는 위치를 클래스로 props.children에 전달하는 값으로 제어한다.

props.content 및 props.direction 이벤트

청취를 통해 표시 시간 제어
여기서는 onMouseEnter으로 문의하십시오.
당신은 그것이 어떻게 onMouseLeave과 함께 일하는지 볼 수 있습니까?
이 파일의 가장 큰 장점은 CSS를 빛을 발하는 데 필요한 최소한의 논리를 가지고 있다는 것이다.그것이 하는 모든 일은 Tooltip.js에게 전달된 도구를 정확한 위치로 이동하는 것이다.
그래서 하루가 끝날 때(또는 화해가 끝날 때)😄), 모든 도구 설명.js에서 이 점을 변경하고 있습니다:

<Tooltip content="Hello, I'm a tooltip" direction="right">
  <button>I'm a button</button>
</Tooltip>

이에 대해 다음을 수행합니다.

<div
  className="Tooltip-Wrapper"
  onMouseEnter={showTip}
  onMouseLeave={hideTip}
>
  <button>I'm a button</button>
  {active && (
    <div className={`Tooltip-Tip right`}>
      Hello, I'm a tooltip
    </div>
  )}
</div>

사용 방법
그것의 작업 원리를 이해한 후에 어떻게 그것을 사용하는지 쉽게 파악할 수 있을 것이다.Tooltip.css 구성 요소를 가져와 패키지로 사용하기만 하면 됩니다.정지할 때 도구 알림을 표시하고 싶은 것보다 높게 하세요.
그것은 세 개의 아이템이 필요합니다.

<Tooltip>, 툴팁의 내용

이 필요합니다. 모든 JSX, 텍스트, 이미지, 기타 구성 요소로

을 결정하십시오.

툴팁의 표시 위치를 제어하는 Tooltip

은 content, direction, top 및 right 옵션으로 제공됩니다.기본값은 bottom

left, 툴팁을 표시하는 데 필요한 시간(ms).

옵션, 기본값은 400ms

이 도구들에 간단한 소포를 더하면 현재 뱀은 top에 매달려 있는 모든 물건에 작은 풍선의 내용을 표시한다.
다음은 제가 프레젠테이션에서 보여준 방법입니다.
멋있죠?
내가 가장 좋아하는 현대 웹 개발의 부분은 구성 요소가 어떻게 처음 설정한 후에 물건을 더욱 쉽게 실현할 수 있는지이다.
jQuery 시간 내에 같은 일을 하려면 많은 중복, 중복과 더 많은 시간이 필요하다.
마지막 반성으로 나는 앞부분의 일부 것들이 지금 매우 복잡해 보인다고 믿지만, 이러한 기술들은 나로 하여금 우리가 정확한 방향으로 전진하고 있다고 느끼게 한다.
이렇게, 읽어줘서 고마워요.나는 이 문장이 너의 전단 여정에 유용하길 바란다.
여느 때와 마찬가지로 평론과 피드백은 매우 환영을 받는다. 그러면 이 실현에서 당신은 어떤 변화나 개선을 할 것인가?
표지 사진은 Drew Beamer이 Unsplash에서 찍었다

여보게, 우리 연결해 보자👋
나에게 네가 이 문장을 좋아한다는 것을 알게 해라!
만약 네가 정말 그것을 좋아한다면, 반드시 너의 친구와 공유해야 한다. 이것은 나에게 매우 큰 도움이 될 것이다😄