Question

我正在尝试遍历对象数组以显示特定名称的所有项目。由于某种原因，我的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

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;

Answer 1

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

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

由于呈现项目时，您做了<Item item={item}/>

为什么无法读取属性图？

1 个答案: