Question

我有一个嵌套的React组件。一个userList，其中包含userRow的列表，并允许我添加新的userRow。当我在chrome中加载这个页面时，我可以在chrome的React开发工具中看到组件，但我在DOM中看不到任何内容。另一方面，当我在firefox中加载此页面时，我可以看到userRow个元素（它们没有呈现为html，仍然在DOM中呈现为<userRow>。我没有看到任何呈现的{ {1}}在Firefox或Chrome中。

为什么会这样？我怎样才能让它真正呈现？

userList：

userRow

userRow：

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);
}

Answer 1

我认为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中有意义。

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

1 个答案: