React、DOMにブートストラップバッジを動的に追加するにはどうすればいいですか？

Question

私はソケットチャットアプリ、&がプライベートメッセージを受け取ったときにユーザーに通知を表示しようとしています。このような

：

<a class="list-group-item list-group-item-action" data-socketid="kiBkagnVmM7Y9COeAAAH"> 
</a> 

の内側に私が追加しようとしています：

<span class="badge badge-danger badge-pill float-right ">4</span> 

を私が得るように：私はjqueryのを使用しないようにしようとしています

、私はJSを使ってそれを行う場合：

.innerHTML += '<span className="badge badge-danger badge-pill float-right ">4</span>' 

ブートストラップクラスが取得されず、スタイルが表示されません。

は、コードに反応：

​​

✌️

感謝を助けてください。

Answer 1

私が最後に考えたのは、CSSクラスがスタイルを表示していなかった理由はリアクションコントロール\仮想ドミノを作成し、要素に直接アクセスできることです。

正しい方法は、手動で要素を作成して追加することです：

let badge = document.createElement('span'); 
      badge.className = 'badge badge-danger badge-pill float-right'; 
      badge.innerHTML = '+' 
      selectUserId[0].appendChild(badge);