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

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

最佳答案

我认为React希望您的班级名称以大写字母开头。


  React可以渲染HTML标签（字符串）或React组件
  （课程）。
  
  要呈现HTML标签，只需在JSX中使用小写标签名称：
  
  要渲染一个React组件
  创建一个以大写字母开头的局部变量：


https://facebook.github.io/react/docs/jsx-in-depth.html

所以在你的代码中

var userRow = React.createClass

应该

var UserRow = React.createClass

和

 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窗口并选择其他单词，因为该单词在javascript中已经具有含义。