Question

我有一个React组件，它列出了Item组件中的项目。

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

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

React Component从Json数据填充Item组件props

1 个答案: