Réagir, comment ajouter dynamiquement un badge d'amorçage au DOM? - javascript, jquery, twitter-bootstrap, réactions, sockets

Je travaille sur l'application de chat de socket et j'essaie d'afficher une notification à l'utilisateur quand il reçoit un message privé.

comme ceci: à l'intérieur

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

J'essaie d'ajouter:

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

Pour que j'obtienne:

J'essaie d'éviter d'utiliser Jquery, mais si je le fais en utilisant JS:

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

Les classes bootstrap ne fonctionnent pas, aucun style n'est affiché.

Code de réaction:

    componentDidMount() {
socket.on("private-message", data => {
let existingMsg = this.state.privateMessages.slice();
existingMsg.push(data);
this.setState({ privateMessages: existingMsg });
this.displayPrivateMessage(data.from);
});
}

displayPrivateMessage(sender) {

let selectUserId = ReactDOM.findDOMNode(this.refs.usersList).querySelectorAll(`[data-socketid=${sender}]`);
selectUserId.innerHTML += "<span className="badge badge-danger badge-pill float-right ">4</span>"
}

Veuillez aider help

Merci.

Réponses:

0 pour la réponse № 1

Ok, j'ai finalement compris que la raison pour laquelle les classes css ne montraient aucun style était: les contrôles React créent un dom virtuel et les éléments sont accessibles directement.

La bonne façon est de créer un élément manuellement et d'ajouter:

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

---