從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';