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