如何实现从父组件传递文本和控制状态给Material Tooltip组件？

实现可行性 #

完全可以，这是Material Tooltip原生支持的受控使用方式，你提到的「父组件传入文本内容、父组件控制显隐状态」的需求完全可以实现，不过你给出的示例代码存在几处语法和属性使用错误，需要调整后才能正常运行：

• useState声明漏了const关键字，正确写法为 const [open, setOpen] = useState(false);
• React事件绑定为驼峰命名，div的点击事件应该写为onClick而非(onClick)
• 原生Material Tooltip的内容属性为title而非text，你示例中的属性引号存在漏写问题，同时Tooltip需要包裹触发元素才能正常绑定交互

修正后的示例代码 #

import { Tooltip } from '@mui/material';
import { useState } from 'react';

const MyComponent = () => {
  const [open, setOpen] = useState(false);
  return (
    <Tooltip title="some text from parent" open={open}>
      <div onClick={() => setOpen(!open)}>
        Click to open tooltip
      </div>
    </Tooltip>
  );
}

如果你使用的是自己封装的Tooltip组件，只要在封装时将内容、显隐状态定义为可接收的props，也可以按照你设想的逻辑实现效果。

内容的提问来源于stack exchange，提问作者Drem Edys