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

您好，我是新的反应，希望将数据从父组件传递到子组件。我想在我的子组件项中显示

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;

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

这是子组件的代码

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;

import React，{Component}来自“React”；
类项扩展了React.Component{
render（）{
返回(
{finalItems}
);
}
}
导出默认项；

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

然后通过以下道具在孩子身上使用：

{this.props.finalItems}

也：我没有看到在

onSelect

方法之外声明的

finalItems

---

这可能是个错误。否则，由于未定义

finalItems

的不同原因，这将中断。您可能应该将

onSelect

函数的最后三行移动到

render

的主体中。是的，您是对的，在本例中需要使用道具。你会像这样使用它

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

也就是说，如果变量finalItems处于状态，则只需将变量放在括号之间

然后在Items中，您可以获得如下项目

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

  );
}
}

render（）{
返回(
{this.props.finalitems}
);
}
}

所有这些变量都依赖于onSelect函数。我应该将整个函数移动到渲染方法中吗？移动整个函数不会有什么不同。问题是范围可变。您可以为

finalItems

创建一个新的状态键，并更新它，而不是使用局部变量。