我已将工具提示放入我的 React 应用程序中,但没有显示任何一个。为什么是这样?错在哪里呢?我将在这里发布代码。
TooltipSpan.js
import React from 'react';
import { OverlayTrigger } from 'react-bootstrap';
const TooltipSpan = (props) => {
const { tooltip, className } = props;
return (
<OverlayTrigger placement="top" overlay={tooltip}>
<span className={className} />
</OverlayTrigger>
);
};
export default TooltipSpan;
将其导入到以下文件中。 Like.js
import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import TooltipSpan from './TooltipSpan.js';
class Like extends Component {
handleAddition = () => {
this.props.onAddition();
}
handleDelete = () => {
this.props.onDelete();
}
render() {
const { isLiked, canLike, isBlocked, isReported } = this.props;
const tooltipCannotLike = (
<Tooltip id="cannot-like">You can not like a profile without a profile picture !</Tooltip>
);
const tooltipLike = (
<Tooltip id="like">Like this profile to be able to talk to him. He also like you !</Tooltip>
);
if (isBlocked || isReported) {
return <span className="fa fa-star cannot-like" />;
}
if (!canLike) {
return <TooltipSpan className="fa fa-star cannot-like" tooltip={tooltipCannotLike} />;
}
if (isLiked) {
return <button className="fa fa-star liked" onClick={this.handleDelete} />;
}
return (
<OverlayTrigger placement="bottom" overlay={tooltipLike}>
<span>
<button
className="fa fa-star-o"
onClick={this.handleAddition}
/>
</span>
</OverlayTrigger>
);
}
}
export default Like;
Like.js 是一个文件。我有一个 block 和报告 js 文件,但在这些文件中也没有任何工具提示。 我有一个问题。构建应用程序可以解决这样的问题吗?我还没有构建这个应用程序。
最佳答案
TooltipSpan.js
上有错误。您应该关闭您的span
像这样<span className={className}>Some text</span>
我已将其复制到 codeSandbox
关于javascript - 我的 React 应用程序中未显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61384665/