javascript - 从 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 的渲染方法。 在侧边栏中(由应用程序创建) 在div中(由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>
        );
    }
}

index.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"));

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