Material-UI Tooltip 需要删除子标题道具答案

【问题标题】：Material-UI Tooltip requires deletion of child title propMaterial-UI Tooltip 需要删除子标题道具
【发布时间】：2019-10-04 21:24:54
【问题描述】：

我正在尝试在已经具有 title 属性的组件上使用 Material-UI Tooltip 组件。我必须使用带有标题道具的孩子。有什么方法可以使用 Material-UI 工具提示，还是需要另找一个？

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton title={this._getTitleMessage()} />
</Tooltip>

Material-UI 抛出此错误：

index.js:2178 警告：Material-UI：您已向 <Tooltip /> 的子级提供了 title 属性。移除此标题属性 Delete 或 Tooltip 组件。

感谢您提供的任何帮助。

【问题讨论】：

你能再解释一下你的场景吗？ this._getTitleMessage() 返回的文本是什么？为什么按钮的标题与工具提示的文本不同？

标签： javascript reactjs material-ui

【解决方案1】：

您可以为属性选择另一个名称并将其传递给RequiredImportedButton 组件中按钮的title 属性：

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton bTitle={this._getTitleMessage()} />
</Tooltip>

// RequiredImportedButton.js
function RequiredImportedButton(props) {
 const { bTitle} = props;

 ...

 return (<button title={bTitle}>My button</button>);
}

【讨论】：

【解决方案2】：

使用简单的方法：将子组件包装在一个 div 中。

<Tooltip title='Disabled' aria-label='disabled button'>
  <div>
    <RequiredImportedButton title={this._getTitleMessage()} />
  </div>
</Tooltip>

【讨论】：

为什么这不是一个被接受的答案？工作正常