简体   繁体   中英

React.js “Empty Object” issue when rendering the Container component into App component?

I am getting the "Empty object" in React console when rendering the Container component into the App component.

1,user-list.js: This is my container component.

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: This is my App file this is where I am trying to display the "userList " but "sample" is not displayed in the browser.

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;

Please correct me if I am missing something?

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

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

So the problem is your userList begins with small u. You should change it while exporting as well as wherever you are using it. Look at the below code to see where it needs to be corrected.

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

I solve your problem with only one single small step: Changing the userList into 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; 

The reason is "React treats components starting with lowercase letters as DOM tags". From the Official React Document :

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

The reason behind this convention :

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM