reactjs 材料-UI工具提示需要删除子标题属性

avkwfej4 于 2022-11-22 发布在 React

关注(0)|答案(3)|浏览(123)

我尝试在已经具有title属性的组件上使用Material-UI工具提示组件。我必须使用具有title属性的子组件。是否有任何方法可以使用Material-UI工具提示，或者是否需要寻找其他方法？

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

Material-UI抛出此错误：
js：2178错误提示：材料-UI：您已将title属性提供给<Tooltip />的子项。请删除此标题属性Delete或工具提示组件。
谢谢你的帮助。

reactjs

来源：https://stackoverflow.com/questions/56188213/material-ui-tooltip-requires-deletion-of-child-title-prop

3条答案

按热度按时间

f4t66c6m1#

采用简单的方法：将子组件 Package 在div中。

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

赞(0）回复(0）举报 2022-11-22

8gsdolmq2#

您可以为该属性选择另一个名称，并将其传递给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>);
}

赞(0）回复(0）举报 2022-11-22

r3i60tvu3#

DIV工作正常，但有时我们可能会遇到一些设计问题，所以最好用碎片标记来 Package ，例如〈〉{props.children}〈/〉

赞(0）回复(0）举报 2022-11-22