使用reactjs（JSX）的bootstrap popover

Question

我正在尝试使用带有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>

但反应不喜欢建立数据内容：

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。

Answer 1

有嵌套的'“'，你需要用这种方式

<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