Javascript 为什么可以'；不可以读取属性映射吗？

我试图遍历一个对象数组，以显示某个名称的所有项。由于某种原因，无法读取我的

this.props.list.items

。任何帮助都将不胜感激

item.js的代码

import React from "react";

class Item extends React.Component{
  render() {
    return(
      <div>{this.props.list.items}</div>
      )
  }
}

export default Item

从“React”导入React；
类项扩展了React.Component{
render（）{
返回(
{this.props.list.items}
)
}
}
导出默认项

horizontalscroll.js的代码

import React from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './horizontalscroll.css';
import Item from './Item';

// list of items
const list = [
  {
    name: "Brands",
    items: ["1", "2", "3"]
  },
  {
    name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {
    name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
];
// One item component
// selected prop will be passed
const MenuItem = ({ text, selected }) => {
  return (
    <div
      className="menu-item"
    >
      {text}
    </div>
  );
};

// All items component
// Important! add unique key
export const Menu = (list) => list.map(el => {
  const { name } = el;

  return (
    <MenuItem
      text={name}
      key={name}
    />
  );
});


const Arrow = ({ text, className }) => {
  return (
    <div
      className={className}
    >{text}</div>
  );
};


const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

class HorizantScroller extends React.Component {
  state = {
    selected: 0
  };

  onSelect = key => {
    this.setState({ selected: key });
  }








  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(list, selected);

    return (
      <div className="HorizantScroller">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={this.onSelect}
        />
      <div>{this.props.items.map((item) => {
        return <Item item={item}/>
      })}
      </div>
      </div>

    );
  }
}

export default HorizantScroller;

从“React”导入React；
从“反应水平滚动菜单”导入滚动菜单；
导入“/horizontalcoll.css”；
从“./Item”导入项目；
//项目清单
常数列表=[
{
名称：“品牌”，
项目：[“1”、“2”、“3”]
},
{
名称：“电影”，
项目：[“f1”、“f2”、“f3”]
},
{
名称：“度假目的地”，
项目：[“f1”、“f2”、“f3”]
}
];
//一项组件
//选定的道具将被传递
常量菜单项=（{text，selected}）=>{
返回(
{text}
);
};
//所有项目组件
//重要！添加唯一密钥
导出常量菜单=（列表）=>list.map（el=>{
常数{name}=el；
返回(
);
});
常量箭头=（{text，className}）=>{
返回(
{text}
);
};
const ArrowLeft=Arrow（{text:''，className:'Arrow next'}）；
类HorizantScroller扩展React.Component{
状态={
已选：0
};
onSelect=key=>{
this.setState（{selected:key}）；
}
render（）{
const{selected}=this.state；
//从项目创建菜单
常量菜单=菜单（列表，选中）；
返回(
{this.props.items.map（（item）=>{
回来
})}
);
}
}
导出默认水平滚动条；

在项目内部，您应该像这样访问它

<div>{this.props.item}</div>

{this.props.item}

---

因为在呈现项目时，您做了

，这应该可以完成任务。@JonathanPein您的代码有很多问题，我的答案只回答了其中的一部分。例如，您正在执行：

const menu=menu（…）

这不应该是dong，您需要执行：

menu返回一个react元素，您正在将该元素作为数据道具传递给一个组件，我不明白您在项中的意思是什么？请您澄清一下，您还应该为您呈现的每个项目组件分配一个唯一的键。在地图中，您应该

返回