从 Array React JS 创建一个列表

Question

我试图创建一个数组来存储我的类别链接，然后显示它们，但是我的 DOM 中没有显示任何内容。任何帮助，将不胜感激 ：）

 import React from "react";
import { SidebarCategory } from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    componentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                icon: "icon",
                title: "Home",
            },
            {
                id: 2,
                icon: "icon",
                title: "Gallery",
            }
        ]});
    }

    render() {
        return (
            <ul className="sidebar__categories container-fluid">
                {this.state.categories.map(category => {
                    return (
                        <SidebarCategory key={category.id} title={category.title} />
                    )
                })};
            </ul>
        );
    }
}

export default SidebarCategories;

编辑：

控制台错误：

bundle.js:357 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查 Sidebar 的渲染方法。在 Sidebar（由 App 创建）在 div（由 App 创建）在 App

sidebarCategory.js

 import React from "react";

export class SidebarCategory extends React.Component {
    render() {
        const SidebarCategory = ({ title }) => {
          return (<div className="sidebarCategory">{title}</div>);
        }
    }
}

侧边栏.js：

 import React from "react";

import { SidebarCategories } from "./SidebarCategories";

export class Sidebar extends React.Component {
    render() {
        return (
            <div className="sidebar col-sm-2">
                <div className="row">
                    <div className="sidebar__header col">
                        <img alt="Logo" className="img-fluid sidebar__header__logo" src="../resources/img/logo-white.png" />
                        {'\u00A0'} <h4 className="i-block">Title</h4>
                    </div>
                </div>
                <div className="row">
                    <div className="sidebar__user container-fluid">
                        <div className="row">
                            <div className="col-sm-4">
                                <img alt="User DP" className="sidebar__user__img img-fluid rounded-circle" src="http://via.placeholder.com/100x100" />
                            </div>
                            <div className="col-sm-8">
                                <p><strong>Welcome</strong><br />
                                Mark Hughes</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <SidebarCategories />
                </div>
            </div>
        );
    }
}

索引.js：

 import React from "react";
import { render } from "react-dom";

import Sidebar from "./components/sidebar";
import Content from "./components/content";

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <Sidebar />
                <Content />
            </div>
        );
    }
}

render(<App className="container-fluid"/>, window.document.getElementById("app"));

原文由 MarkHughes88 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

import React from "react";
import SidebarCategory from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    componentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                title: "Home",
            },
            {
                id: 2,
                title: "Gallery",
            }
        ]});
    }

    render() {
        return (
            <ul className="sidebar__categories container-fluid">
                <SidebarCategory categories={this.state.categories} />
            </ul>
        );
    }
}

export default SidebarCategories;

并将其添加到您的 SidebarCategory 文件中：-

 import React from "react";

export class SidebarCategory extends React.Component {
    render() {
        return (
            <li className="sidebar__category container-fluid">
                <div className="row">
                      <div className="col-sm-10">
                          {this.props.categories.map((category, key) =>(
                            <span key={key}>{category.title}</span>
                          ))}
                      </div>
                </div>
            </li>
        );
    }
}

原文由 Shubham 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先在 SidebarCategories

 import {SidebarCategory}... //with curly braces

侧边栏中的第二个：

 import SidebarCategories from "./SidebarCategories"; //without curly braces

看：

 export class SidebarCategory //no default -> import {SidebarCategory} from...
export default SidebarCategories; //with default -> import SidebarCategories from ...

原文由 Andrii Starusiev 发布，翻译遵循 CC BY-SA 3.0 许可协议