如何使用TypeScript将ref添加到React的material-ui Box组件中?这对于允许动画库(例如GreenSock / GSAP)动画化节点很重要。对于material-ui docs,使用itemRef将不起作用,因为它需要使用findDOMNode,它在严格模式下(并发React的准备工作)已弃用,并且由于虚拟DOM渲染而可能会损坏。
没有将ref与ALL-UI生成的节点]相关联的能力,没有可靠的方法来集成针对特定节点的动画库。
material-ui GitHub项目上有几个相关问题。我在Issue #17010
上发布了一种解决方法,直到material-ui包括向所有生成的节点添加ref的能力为止。相关问题:
使用@ material-ui / core / styles不起作用,需要使用emotion或styled-components。 由于样式组件唯一生成的动画闪烁问题,我们被迫对样式组件使用情感。] >>// 1. Import style library, either Emotion or Styled-Components import styled from "@emotion/styled"; // 2. Recreate the Material-UI Box with a styled component const StyledBox = styled(Box)``; // 3. Usage in the render <StyledBox ref={boxRef}>Box Content</StyledBox>
注意: