Question

嗨，我是React的新手，想将数据从父组件传递到子组件。我想在子组件项中显示finalItems。但是，它在子组件中找不到`finalItems`。我认为可能是我需要使用道具吗？这是正确的吗？

任何帮助将不胜感激

这是父组件的代码

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

// list of items




// 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: 'Brands',
    statelist: [
  {name: "Brands",
    items: ["1", "2", "3"]
  },
  {name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
]

  };



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

    const myList = this.state.statelist;
    const myItemDetails = myList.filter(items=>items.name === key);
    const finalItems = myItemDetails.map(items => items);
    x




  }


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


    return (
      <div className="HorizantScroller">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={this.onSelect}
        />
      <div>

      </div>
      <Items onSelect={this.onSelect}/>

      </div>

    );
  }
}

export default HorizantScroller;

这是子组件的代码

import React, { Component } from "react";




class Items extends React.Component{



render() {
  return (
      <div >
      {finalItems}
      </div>

  );
}
}




export default Items;

Answer 1

正确。将其作为道具传递给组件，如下所示：

<Items finalItems={finalItems} onSelect={this.onSelect}/>

然后通过以下道具在孩子中使用它：

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

也：我看不到finalItems方法之外的onSelect声明这可能是一个错误。否则，这将因未定义finalItems的其他原因而中断。您可能应该将onSelect函数的最后三行移到render的正文中。

Answer 2

是的，在此示例中，您将需要使用道具。您将像这样使用它。.

<Items finalitems={this.state.finalItems} onSelect={this.onSelect}></Items>

也就是说，如果变量finalItems保持状态，否则只需将变量放在方括号之间。

然后在项目中，您可以像这样获得这些项目。

render() {
  return (
      <div >
      {this.props.finalitems}
      </div>

  );
}
}

我想将数据从父组件（状态）传递到子组件

2 个答案: