React組件填充Json數據中的Item組件道具

Question

我有一個列出項目組件中項目的React組件。

下面你可以看到它的外觀。

const ListHolder =() => (
    <div> 
    <div className="panel"> 
     <div className="panel-heading"> 
     <h3 className="panel-title">List Title</h3> 
     </div> 
     <div className="panel-body"> 
     <Item 
      title="A Title" 
      desc="Desc 1." 
     /> 
     <Item 
      title="Another Title" 
      desc="Desc 2." 
     /> 
     <Item 
      title="Some of title" 
      desc="Desc 3." 
     /> 
     </div> 
    </div> 
    </div> 
); 

export default ListHolder; 

項目組件當前被硬編碼。

如何從一些Json數據填充/插入數據？

Answer 1

如果你通過items數據作爲你的組件的道具，你可以這樣做：第一評述〜後

const ListHolder = ({items}) => (
    <div> 
    <div className="panel"> 
     <div className="panel-heading"> 
     <h3 className="panel-title">List Title</h3> 
     </div> 
     <div className="panel-body"> 
     { items.map((item) => <Item title={item.title} desc={item.desc} />)} 
     </div> 
    </div> 
    </div> 
); 

〜編輯

也就是說，如果你可以用所謂的

否則「常用」方式可能類似於：

class ListHolder extends React.Component { 
    render() { 
    const items = [{ "title": "title", "desc": "some desc" }, { "title": "title2", "desc": "some other desc" }]; 
    return (
     <div> 
     <div className="panel"> 
      <div className="panel-heading"> 
      <h3 className="panel-title">List Title</h3> 
      </div> 
      <div className="panel-body"> 
      { items.map((item) => <Item title={item.title} desc={item.desc} />)} 
      </div> 
     </div> 
     </div>  
    ); 
    } 
}