[英]Mapping data from array in child component and parent component
我将数据存储在数组的data.js文件中。 我在Child组件(仅数组中的第一个对象)中显示该数据。 我想通过父组件中的相同数组进行映射(通过渲染<ChildComponent>
)。 我怎样才能做到这一点?
data.js
export default {
accordionItems: [
{
id: 1,
title: 'Why is my car not green?',
answer: 'We ran out of green color',
},
{
id: 2,
title: 'Where have all the drivers gone?',
answer: 'It\'s lunch time',
},
{
id: 3,
title: 'Do you have a book of complains',
answer: 'You can write at info@mail.eu',
},
],
};
子组件
import Data from './data';
class AccordionItem extends Component {
constructor(props) {
super(props);
this.state = {
question: Data.accordionItems[0], //if I remove [0], no data is rendered
};
}
return (
<div >
<div>
<p>{question.title}</p>
<button>toggle</button>
</div>
<p>{question.answer}</p>
<hr />
</div>
);
父组件
import AccordionItem from './AccordionItem';
import Data from './data';
class Accordion extends Component {
constructor(props) {
super(props);
this.state = {
accordionItems: Data.accordionItems,
};
}
render() {
const { accordionItems } = this.state;
return accordionItems.map(accordionItem => (
<AccordionItem key={accordionItem.id} />
我想从“父”组件的“数据”数组中获取所有3个对象,现在我只有第一个对象就获得了3个相同的组件。
将物品作为道具传递:
<AccordionItem question={accordionItem} ... />
您可以在render()方法中访问它:
render() {
const { question } = this.props;
return (
<div >
<div>
<p>{question.title}</p>
<button>toggle</button>
</div>
<p>{question.answer}</p>
</div>
);
}
您根本不应该使用状态。
您可以简单地从map函数本身传递数据,例如:
accordionItems.map(accordionItem => (
<AccordionItem
key={accordionItem.id}
open={[`isOpen-${accordionItems.id}`]}
data={accordionItem}
/>
));
在孩子中:
class AccordionItem extends Component {
constructor(props) {
super(props);
this.state = {
question: props.data, //data from map function in parent
};
}
也许您应该阅读更多有关React中的组件和传递道具的信息。
您可以做的是代替将Data
导入AccordionItem
组件中,而通过props将其传递给AccordionItem
。
看起来像这样:
import AccordionItem from './AccordionItem';
import Data from './data';
class Accordion extends Component {
constructor(props) {
super(props);
this.state = {
accordionItems: Data.accordionItems,
};
}
render() {
const { accordionItems } = this.state;
return accordionItems.map(accordionItem => (
<AccordionItem
key={accordionItem.id}
item={accordionItem}
open={[`isOpen-${accordionItems.id}`]}
/>
))
}
现在,该项目应该可以通过子组件中的props进行访问:
class AccordionItem extends Component {
render(){
const { question } = this.props
return (
<div >
<div>
<p>{question.title}</p>
<button>toggle</button>
</div>
<p>{question.answer}</p>
<hr />
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.