zoukankan      html  css  js  c++  java
  • [React] Manipulate the DOM with React refs

    React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’re using a third party library that wasn’t built for or with React specifically. To do this, we need to have some value that’s associated with our component (like state) to store a reference to the DOM element, but doesn’t trigger re-renders when it’s updated (unlike state). React has something specifically for this and it’s called a ref.

    You create a ref object with the useRef hook and that object’s current property is the current value of the ref. It can be anything, but if you pass that ref object to a component as a prop called ref, then React will set the current property to the DOM element it creates so you can reference it and manipulate it in your useEffect hook.

    In this lesson we’ll get to see how that works with a cool library called vanilla-tilt.

      function Tilt({children}) {
          const tiltRef = React.useRef()
    
          React.useEffect(() => {
            const tiltNode = tiltRef.current
            const vanillaTiltOptions = {
              max: 25,
              speed: 400,
              glare: true,
              'max-glare': 0.5,
            }
            VanillaTilt.init(tiltNode, vanillaTiltOptions)
            return () => {
              tiltNode.vanillaTilt.destroy()
            }
          }, [])
    
          return (
            <div ref={tiltRef} className="tilt-root">
              <div className="tilt-child">{children}</div>
            </div>
          )
        }
  • 相关阅读:
    剑指Offer——对成的二叉树
    剑指Offer——二叉树的下一个节点
    路径总和I、II、III
    性能调优工具
    关于在程序中内存检测的一些知识
    ptmalloc、tcmalloc及 jemalloc总结
    [LeetCode] 43. 字符串相乘
    [LeetCode] 155. Min Stack
    [LeetCode] 380. Insert Delete GetRandom O(1)
    linux内存过高排查
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12595253.html
Copyright © 2011-2022 走看看