使用reactjs(JSX）引导popover

bootstrap popover with reactjs (JSX)

本文关键字：引导 popover JSX reactjs 使用      更新时间：2023-09-26

我正试图使用内置html的bootstraps popover按钮，但在构建JSX时遇到了意外的令牌错误。

以下是我想在JSX:中做的事情

<button type="button" className="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="bottom"
        data-content="<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>">
        data-html="true"
        Popover on bottom
 </button>

但react不喜欢构建数据内容：

data-content="<button type="button" className="btn btn-danger pull-xs-left"

抛出：意外的令牌

> 1265 |                                     data-content={"<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>"}>
       |                                                                  ^

我该如何解决这个问题？我不想最好使用jquery。

有嵌套的"，您需要使用这种方式

<button type="button" className="btn btn-secondary" data-container="body"
    data-toggle="popover" data-placement="bottom"
    data-content='<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>'
    data-html="true"
    Popover on bottom

相关文章：