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：type无效 - 期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。检查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>);
        }
    }
}

sidebar.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

目前你没有迭代你的类别，你已经处于状态，所以首先要map覆盖它们，并为你的子组件<SidebarCategory>提供所需的数据;类别ID和标题中的键。

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

然后，您的<SidebarCategory>组件应返回div（例如）标题，该标题由您提供的props填写。

const SidebarCategory = ({ title }) => {
  return <div className="SidebarCategory">{title}</div>
}

export default SidebarCategory;

Answer 2

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

Answer 3

首先在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 ...

Answer 4

试试这些： 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"/>, document.getElementById("app"));

Sidebar.js

import React from "react";

import SidebarCategories from "./SidebarCategories";

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

export default Sidebar;

SidebarCategory.js

import React from "react";

class SidebarCategory extends React.Component {
    render() {
        return (
                <div className="row">
                      <div className="col-sm-10">
                          {this.props.category.title}
                      </div>
                </div>
        );
    }
}

export default SidebarCategory;

SidebarCategories.js

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() {
        let list = this.state.categories.map((category) => {
          <li className="sidebar__category container-fluid" key={category.id}><SidebarCategory category={category} /></li>
        });

        return (
            <ul className="sidebar__categories container-fluid">
                {list}
            </ul>
        );
    }
}

export default SidebarCategories;

Answer 5

我相信问题出在你的sidebarCategory.js中，你在有状态组件中创建了一个无状态（箭头函数）组件。

因为它只是一个从道具中呈现数据的组件，所以你可以单独使用无状态/箭头功能。

    const SidebarCategory = ({ title }) => {
      return (<div className="sidebarCategory">{title}</div>);
    }
    export default SidebarCategory; // this way its exported as default component, import it without using curly brackets (import SidebarCategory from './SidebarCategory';
    // OR
    export SidebarCategory; // this way its exported as non-default component, import it using the curly brackets (import {SidebarCategory} from './SidebarCategory';

从Array React JS创建一个列表

5 个答案: