reactjs - 如何在不使用 npm-module 或 react-bootstrap 的情况下在 ReactJS、JSX 中使用工具提示？

Question

我在 Reactjs 元素中使用 bootstrap4，我使用 npm 安装 bootstrap4 并在 App.js 中提供模块路径链接，如

导入 'bootstrap/dist/css/bootstrap.min.css';

但是在使用工具提示时，对图标使用内联样式，我不能给属性 data-toggle 因为它们之间的 - 和 JSX 认为它是两个不同的组件。

我读到我们可以通过第三方模块或单独的组件提供工具提示，但我想实现内联样式。

这是它的代码。

<Link to={`contact/edit/${id}`}>
                  <i
                    className="fas fa-pencil-alt "
                    style={{
                      data-toggle="tooltip", data-placement="top", title="Tooltip-not-working!",
                      cursor: "pointer",
                      float: "right",
                      color: "green",
                      marginRight: "1rem"
                    }}
                  />
                </Link>

错误是由于没有将属性作为单个字符串给出。

my GitHub code-link.

Answer 1

那是因为您通过 style 赋予属性标签。它应该看起来像这样:

<i data-toggle="tooltip" data-placement="top" title="Tooltip-not-working!" style={{...}} />