使用 reactjs (JSX) 引导弹出窗口

Question

我正在尝试使用带有 html 的引导弹出按钮，但在构建 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。

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