从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（由应用程序创建的） 在应用

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

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 2

此刻你还没有迭代哟你所持有的你的类别，所以首先是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 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';