У меня есть все компоненты, перечисленные в App.js.Я в некотором роде забочусь о том, как передавать значения из одного компонента в другой.
Вот как это должно работать:
Когда элемент выбран в первом компоненте (ItemList), детали загружаются во второй компонент (ItemDetails).Затем во втором компоненте, если я нажимаю «добавить», он добавляется в третий компонент (ItemSelection).
Как передать выбранный элемент в ItemList в ItemDetails, а затем передать его вItemSelection при нажатии кнопки?
App компонент:
// dummy selectedItems array
let selectedItems = [
{
'name': 'item 3',
'type': ['car'],
'details': [ 'Detail 1', 'Detail 2', 'Detail 3' ]
},
{
'name': 'item 6',
'type': ['bike'],
'details': [ 'Detail 5', 'Detail 1']
}
]
<Container>
<ItemList/>
<ItemDetails/>
<ItemSelection selected={selectedItems}/>
</Container>
ItemList компонент:
const LIST_ITEMS = require('./LIST_ITEMS.json');
const myList =
LIST_ITEMS.data.Items.map((Item) => (
<li key={Item.id} onClick={() => loadItem(Item.name)}>
{Item.name.toUpperCase()}
</li>
))
;
function loadItem(name){
console.log(name);
}
class ItemList extends Component {
render() {
return (
<div id="item-list-wrapper">
<h3>Select an Item</h3>
<ul id="item-list">{myList}</ul>
</div>
);
}
}
ItemDetails компонент:
import React, { Component } from 'react';
class ItemDetails extends Component {
render() {
<div id="item-details">
// Additional details about the item
<button>Add to selection</button>
</div>
}
}
ItemSelection компонент:
import React, { Component } from 'react';
class ItemSelection extends Component {
render() {
<div id="item-selection">
// List selected items
<h3>Selected Items</h3>
<div className="item-slot">
{this.props.selected[0] ? (
<div className="selected-details">
<h4>{this.props.selected[0].name}</h4>
<ul>
<li>{this.props.selected[0].details[0]}</li>
<li>{this.props.selected[0].details[1]}</li>
<li>{this.props.selected[0].details[2]}</li>
</ul>
</div>
) : (
<p>empty</p>
)}
</div>
</div>
}
}