React Material UI 工具提示禁用动画答案

【问题标题】：React Material UI Tooltips Disable AnimationReact Material UI 工具提示禁用动画
【发布时间】：2020-04-10 11:58:01
【问题描述】：

我在我的 React 应用程序中使用 React Material UI 的工具提示组件。

import Tooltip from "@material-ui/core/Tooltip";
...
...
<Tooltip title="Add" arrow>
    <Button>Arrow</Button>
</Tooltip>
...
...

我想禁用进入和退出动画。如何在最新版本中实现这一点

【问题讨论】：

你能添加更多与Tooltip组件相关的代码吗？
我知道我可能需要使用withStyles 并在一些预定义的组件中覆盖一些预定义的样式，但我不知道那个样式是什么以及那个组件是什么。
您可以在 React 开发工具中查看 Tooltip 存在的道具

标签： reactjs material-ui

【解决方案1】：

您可以使用TransitionComponent 和TransitionProps 来解决这个问题。

使用Fade 转换组件和timeout: 0 作为转换组件的属性：

import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";
...
<Tooltip
    title="Add"
    arrow
    TransitionComponent={Fade}
    TransitionProps={{ timeout: 0 }}
>
    <Button>Arrow</Button>
</Tooltip>

【讨论】：

【解决方案2】：

只需禁用/模拟过渡组件。即：像这样自动渲染孩子：

const FakeTransitionComponent = ({ children }) => children;

<Tooltip
  title="tooltip title"
  TransitionComponent={FakeTransitionComponent}
  // or TransitionComponent={({ children}) => children}
>
  <h1>Hello CodeSandbox</h1>
</Tooltip>

这是codesandbox demo

【讨论】：

【解决方案3】：

我用过 Incepter 的解决方案，很干净。如果有人在这里寻找 TypeScript 解决方案。

const FakeTransitionComponent = React.forwardRef<
  HTMLDivElement,
  TransitionProps & { children?: React.ReactElement<any, any> }
>(
  (
    {
      appear,
      onEnter,
      onEntered,
      onEntering,
      onExit,
      onExited,
      onExiting,
      ...props
    },
    ref
  ) => {
    props.in = undefined;
    return <div {...props} ref={ref}></div>;
  }
);

TransitionProps 不会传递给包装器元素，因为它们都会导致 React 警告。

【讨论】：

【解决方案4】：

你可以将 React.Fragment 作为 TransitionComponent 传递

<Tooltip
  title="tooltip title"
  TransitionComponent={React.Fragment}

>
  <h1>Hello CodeSandbox</h1>
</Tooltip>

【讨论】：

【解决方案5】：

最好的选择是创建一个简单的NoTransition 组件：

export const NoTransition = React.forwardRef<
  React.ReactFragment,
  TransitionProps
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
>(({ children }, ref) => {
    return <>{ children }</>;
});

然后做TransitionComponent={ NoTransition }。

另外，不要省略ref 参数，否则你也会收到警告：

警告：forwardRef 渲染函数只接受两个参数：props 和 ref。忘记使用 ref 参数了吗？

只添加TransitionProps={{ timeout: 0 }}，不设置TransitionComponent也可以，但在这种情况下不需要渲染默认的TransitionComponent。

其他答案中提出的一些选项会引发错误或警告：

执行TransitionComponent={ Fragment } 将导致以下警告：

警告：提供给 React.Fragment 的无效属性 appear。 React.Fragment 只能有 key 和 children 属性。

执行TransitionComponent={ ({ children }) => children } 将导致其他警告（可能会根据您使用Tooltip、Modal 或其他组件而有所改变）：

警告：失败的道具类型：无效的道具children 提供给ForwardRef(Modal)。期望一个可以容纳 ref 的元素。您是否不小心将普通函数组件用于元素？欲了解更多信息，请参阅https://mui.com/r/caveat-with-refs-guide

警告：道具类型失败：提供给 ForwardRef(ModalUnstyled) 的道具 children 无效。期望一个可以容纳 ref 的元素。您是否不小心将普通函数组件用于元素？欲了解更多信息，请参阅https://mui.com/r/caveat-with-refs-guide

警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？检查Unstable_TrapFocus的渲染方法。

还有可能出现这个错误：

未捕获的错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

我正在使用"@mui/material": "^5.5.2"。

【讨论】：