Question

将Container组件渲染到App组件时，我在React控制台中得到了“空对象”。

1，user-list.js：这是我的容器组件。

import React , {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

class userList extends Component {
    render() {
        return (
            <div>
                <h1>sample</h1> 
            </div>          
        );
    }
}

export default userList;

2，App.js：这是我的App文件，这是我试图显示“ userList”的地方，但浏览器中未显示“ sample”。

import React from 'react';
import userList from '../containers/user-list';


require('../../scss/style.scss');

const App = () => {
    return (
        <div>
            <h2>User List</h2>
            <userList />
            <hr />
            <h2>User Details</h2>
        </div>
    );
}

export default App;

如果我缺少什么，请纠正我吗？

Answer 1

尝试将用户列表更改为用户列表，并使用大写字母U。

Answer 2

在JSX中，小写标签名称被认为是HTML标签。但是，带有点（属性访问器）的小写标记名称不是。

所以问题是您的userList以小u开头。您应该在导出时以及在任何使用位置更改它。查看下面的代码，看看需要在哪里纠正。

class UserList extends Component
export default UserList;
import UserList from '../containers/user-list';
<UserList />

Answer 3

我只需一步就可以解决您的问题：将userList更改为UserList。

import React from 'react';
import UserList from '../containers/user-list';

const App = () => {
  return (
    <div>
      <h2>User List</h2>
      <UserList />
      <hr />
      <h2>User Details</h2>
    </div>
  );
};

export default App;

原因是“ React将以小写字母开头的组件视为DOM标签”。来自Official React Document：

React将以小写字母开头的组件视为DOM标签。例如，代表HTML div标签，但代表组件，并且要求Welcome位于范围内。

reason behind this convention：

用户定义的组件必须大写   当元素类型以小写字母开头时，它指的是诸如或的内置组件，并导致将字符串'div'或'span'传递给React.createElement。以大写字母开头的类型（例如，编译为React.createElement（Foo））并与您的JavaScript文件中定义或导入的组件相对应。

我们建议使用大写字母命名组件。如果你有一个   以小写字母开头的组件，请将其分配给   在JSX中使用大写变量之前。

将Container组件渲染到App组件时，React.js出现“ Empty Object”问题？

3 个答案: