React，如何动态地将引导徽章添加到 DOM？答案

【问题标题】：React, How to add bootstrap badge to DOM dynamically?React，如何动态地将引导徽章添加到 DOM？
【发布时间】：2018-03-30 10:41:51
【问题描述】：

我正在开发套接字聊天应用程序，并尝试在用户收到私人消息时向他显示通知。

像这样：里面

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

bootstrap 类没有启动，没有样式显示。

反应代码：

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

请帮忙✌️

谢谢。

【问题讨论】：

你能发布一些你的组件代码吗？具体来说，您添加span 的位置以及添加它的逻辑
@palsrealm 你好，我添加了上面的代码，非常感谢你的时间。

标签： javascript jquery twitter-bootstrap reactjs sockets

【解决方案1】：

好吧，我终于想通了，css 类没有显示任何样式的原因是：React 控件\创建了一个虚拟 dom，并且可以直接访问元素。

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

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

【讨论】：