Typescript/React: 如何在 material-ui Box 组件中添加 ref？

Question

如何在React中使用TypeScript将ref添加到Material-UI Box组件中？这很重要，因为这样可以允许动画库（如GreenSock / GSAP）对节点进行动画处理。根据Material-UI文档，使用itemRef将无法正常工作，因为它需要使用findDOMNode，而在严格模式下（用于并发React的准备），它已被弃用，并且由于虚拟DOM渲染，进一步可能会出现故障。

- n8sabes

---

你能提供一些编程示例来强调你想做的事情吗？ - MEDZ

@MEDZ，谢谢您的回复。我已经找到了其他几篇关于Box引用限制的帖子，并在每个帖子上发布了一个摘要和解决方法，如下所示。 - sebastian

在标题中指定设置 - Jeffrey Benjamin Brown

Answer 1

没有将ref与所有Material-UI生成的节点相关联的能力，就没有一种可靠的方法来集成针对特定节点的动画库。

在material-ui的GitHub项目中有几个相关问题。在material-ui包含添加ref到所有生成的节点的能力之前，我在Issue #17010上发布了一个解决方法。

相关问题：

• 如何向Box组件添加ref？ #19284
• [Box] 允许在Box上使用ref #19275
• TypeScript定义中Box缺少ref #17010

临时解决方法：

// 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>

注意：使用 @material-ui/core/styles 无法工作，需要使用 emotion 或 styled-components。 我们不得不使用 emotion 替代 styled-components，因为 styled-components 会产生动画闪烁问题。

- n8sabes

---

看起来这个问题已经在 material-ui v5 中得到了修复，该版本目前处于 alpha 阶段。 - Enrico Borba