如何使用工具提示中ReactJS，在JSX，而无需使用NPM模块或反应的自举？

Question

我在Reactjs项目中使用bootstrap4，我安装bootstrap4使用NPM，并给予在App.js模块路径链接，

import '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={{...}} />

Answer 2

您将在错误的地方属性。样式属性应该只有驼峰财产一样marginTop没有边距。和道具的剩余你传递给元素应该是相同的HTML。

<i data-toggle="Your Message" style={{marginTop: '5px'}} />