React元素出现在chrome react开发工具中，但未出现在DOM中

问题描述

我有一个嵌套的React组件。 一个userList ，其中包含userRow的列表，并让我添加新的userRow 。 当我在chrome中加载此页面时，可以在chrome的React开发工具中看到组件，但是在DOM中什么都看不到。 另一方面，当我在firefox中加载此页面时，我可以看到userRow元素（这些元素未呈现为html，但仍在DOM中呈现为<userRow> 。在firefox或chrome userRow不到任何呈现的userRow 。

为什么会这样？ 以及如何使它真正呈现？

userList：

render: function() {
    var users = this.state.users;
    var usersList = [];
    for (var i = 0; users.value !== undefined && i < users.value.length; i++) {
        usersList.push(<userRow userName={users.value[i].userName} socket={socket} userId={users.value[i].userId}/>);
    }
    var window =
        <div>
            <input type="text" id="userNameBox" ref="userNameBox"></input>
            <input type="button" onClick={this._addNewUser} value="add user" id="add"/>
            {usersList}
        </div>;
    return (window);
}

userRow：

'use strict';

var React = require('react');

var userRow = React.createClass({

    displayName: 'userRow',

    propTypes: {},

    mixins: [],

    getDefaultProps: function() {
        return ({
            userId: 0,
            userName: '',
            socket: null
        });
    },
    componentWillMount: function() {
        this.setState({
            userId: this.props.userId,
            userName: this.props.userName,
            socket: this.props.socket
        });
    },
    //componentDidMount: function() {
    //    socket = io.connect();
    //    socket.on('messageList', function(messages) {
    //        this.setState({
    //            messages: messages
    //        });
    //    }.bind(this));
    //},
    getInitialState: function() {
        return ({
            userId: 0,
            userName: '',
            socket: null
        });
    },
    _deleteUser: function(){
        var socket = this.state.socket;
        socket.emit('deleteUser', {userId: this.state.userId});
    },
    render: function() {
        return(
            <div>
                <span>{this.state.userName}</span>
                <input type="button" onClick={this._deleteUser} value="delete user" id="deleteUserButton"/>
            </div>
        );
    }
});

module.exports = userRow;