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

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>

另外：我没有看到在onSelect方法之外声明的finalItems这可能是一个错误。 否则，这将由于finalItems未定义的不同原因而中断。 您可能应该将onSelect function 的最后三行移到render的正文中。

Answer 2

是的，你是对的，在这个例子中你需要使用道具。 你会这样使用它..

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

也就是说，如果您的变量 finalItems 保存在 state 中，否则只需将变量放在括号之间。

然后在 Items 中你可以像这样得到这些项目。

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

  );
}
}