reactjs（JSX）を使用したブートストラップポップアップ

Question

JSXをビルドするときに、予期せぬトークンエラーが発生しましたが、ブートストラップのpopoverボタンをhtmlで使用しようとしています。ここで

は、私が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