React，如何动态地向DOM添加bootstrap徽章？

Question

我正在开发套接字聊天应用，＆amp;试图在用户收到私信时向用户显示通知。

像这样：里面

<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>'

引导类没有拾取，没有显示样式。

反应代码：

    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>"
    }

请帮助✌️

感谢。

Answer 1

好的，我终于想通了，css类没有显示任何样式的原因是：React controls \ creats是一个虚拟dom，可以直接访问这些元素。

正确的方法是手动创建元素并追加：

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