使用 reactstrap 的工具提示转换不起作用答案

【问题标题】：Tooltip transitions not working using reactstrap使用 reactstrap 的工具提示转换不起作用
【发布时间】：2019-06-14 17:14:59
【问题描述】：

我正在尝试使用 reactstrap 显示工具提示。工具提示正确显示，但没有淡入/淡出过渡。使用检查器，我注意到 fade 类没有应用于工具提示 <div>：

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

"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 文件中包含使用 SASS 的引导程序：

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

在我的style.scss:

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

我错过了什么吗？

我在https://codesandbox.io/s/01zm5k5w10上创建了一个代码框

谢谢。

【问题讨论】：

你也添加了这两个库吗？反应过渡组，反应波普尔？这 2 个库受工具提示影响，没有添加自动
是的，这两个库都安装好了，见我上面的package.json："react-popper": "^1.3.2", "react-transition-group": "^2.5.3",
您确定包含这个文件：reactstrap.full.min.js 而不是这个文件：reactstrap.min.js 吗？根据他们的文档：npmjs.com/package/reactstrap#versions

标签： reactjs reactstrap

【解决方案1】：

看起来问题不在于 CSS/SASS - 它不是您缺少或不包含的某个类 - 但它在您的反应/js 中，因为它没有将“淡入淡出”类应用于像文档网站上的包装器 div。

编辑 - 看起来他们的代码有一些问题 - 除了他们的文档站点之外，所有 reactstrap 的真实示例 - 具有相同的淡化效果问题 - 例如，your sandbox，来自 codepen 的很多示例我不能在这里粘贴等等。

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

【讨论】：

是的，我也注意到了，但 div 是由 reactstrap 创建的，而不是我创建的。我创建了一个代码框codesandbox.io/s/01zm5k5w10 来显示问题。
您可能是对的，PR 似乎与我的问题有关。我从他们的（工作！）示例开始，所以我责怪我的代码，我在他们的 github 上打开了一个问题。
他们确认过渡尚未发布github.com/reactstrap/reactstrap/issues/1370

【解决方案2】：

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

【讨论】：