javascript - 我想将数据从父组件(状态)传递给子组件
问题描述
嗨,我是 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;
解决方案
正确的。将其作为道具传递给组件,如下所示:
<Items finalItems={finalItems} onSelect={this.onSelect}/>
然后通过这样的道具在孩子中使用它:
<div>
{this.props.finalItems}
</div>
另外:我没有看到finalItems
在方法之外声明onSelect
这可能是一个错误。否则,这将finalItems
由于未定义的不同原因而中断。onSelect
您可能应该将函数的最后三行移到render
.
推荐阅读
- selenium-webdriver - 无法在字段集中找到输入字段
- android - 颤振 - 如何以编程方式自动滚动到具有动态高度的索引
- c - 错误:初始化 GLUT 时从“Int”到“Int*”的无效转换
- bash - bash: ((: ave=total/numLines : 除以 0 (错误标记是“numLines”)
- shell - 如果一个项目中的任何命令失败,如何使 google `repo forall` 返回 false?
- python - Apache Tika 语言检测似乎无法正常工作
- html - 如何在输入字段中居中占位符/输入文本,但保持光标左对齐
- php - 使用 utf8mb4 (Laravel) 的不区分大小写的 SQL 查询
- python - Python - 具有调用的参数的函数存储列表
- sql - 不满足 SELECT 条件