工具提示转换无法使用 reactstrap

Question

我正在尝试使用 reactstrap 显示工具提示。工具提示正确显示，但没有 fade-in/out 过渡。使用检查员我注意到 class fade 没有应用到工具提示 <div>:

我按照 https://www.npmjs.com/package/reactstrap#adding-bootstrap 上的安装说明将这些依赖项添加到我的 package.json 使用 yarn:

"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",

这是从我的应用程序中获取的工具提示用法示例组件：

import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';

export default class ExampleTooltip extends React.PureComponent {
    constructor(props) {
        super(props);
        this._id = `autogeneratedid-${nanoid()}`;
    }

    render() {
        return (
                <>
                    <span id={this._id}>Hover me!</span>
                    <UncontrolledTooltip target={this._id}>
                        My tooltip
                    </UncontrolledTooltip>
                </>
            );
    }
}

我在我的 index.js 文件中包括 bootstrap 使用 SASS：

import '../styles/style.scss';

在我的 style.scss 中：

@import 'bootstrap/scss/bootstrap.scss';

我是不是漏掉了什么？

我在 https://codesandbox.io/s/01zm5k5w10

上创建了一个 codesandbox

谢谢。

Answer 1

你检查过 devtool 中的 styles.css 了吗？检查 => 来源

Answer 2

看起来问题不在 CSS/SASS - 它不是你遗漏或不包括的一些 class - 但它是你 react/js 的东西，因为它是没有像在文档网站上那样将 "fade show" classes 应用到包装器 div。

编辑 - 看起来他们的代码有一些问题 - 除了他们的文档站点之外，所有 reactstrap 的真实示例 - 都存在与淡入淡出效果相同的问题 - 例如，your sandbox，很多来自 codepen 的示例，我无法在此处粘贴以及更多内容。

当您在 GitHub 中查找此问题时，您可以看到 some Discussions 关于它的信息 - 我认为库中有一些东西，而您的代码中没有。

工具提示转换无法使用 reactstrap

Tooltip transitions not working using reactstrap

reactjs

reactstrap