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

有嵌套的＆＃39; ＆＃34; ＆＃39;，你需要这样使用

<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

使用reactjs（JSX）的bootstrap popover

1 个答案: