Būsenų perdavimas į antrinius komponentus React

Tarkime, kad turime produktų masyvą:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Tarkime, kad šis masyvas yra komponente Products. Įrašykime šiuos produktus į komponento būseną:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Dabar peržiūrėkime produktus ciklu ir išveskime juos kokioje nors išdėstyme:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Kaip matote, mūsų ciklo map turinys yra pakankamai sudėtingas, ypač jei produkto išdėstymas ateityje išsiplės. Toks sudėtingumas apsunkina kodo skaitomumą, supratimą ir priežiūrą.

Geriau būtų išskirti kodą, atsakingą už rodymą produkto, į atskirą komponentą. Pavadinkime jį Product. Štai mūsų komponento kodas:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

Dabar komponento Products viduje cikle map naudokime antrinius komponentus Product:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Kaip matote, dabar ciklo kodas supaprastėjo ir tapo labiau suprantamas. Be to, dabar už produkto rodymą atsakingas atskiras komponentas, kuriame galime kurti, o vėliau redaguoti produktų išdėstymą.

Techniškai mes gauname, kad pagrindinis komponentas turi būseną su duomenimis, o antriniai komponentai gauna šiuos duomenis kaip props'us ir atvaizduoja juos mums reikiamu būdu.

Komponento Users būsenoje pateiktas šis masyvas:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Peržiūrėkite šį masyvą ciklu ir išveskite visus vartotojus į ekraną. Sukurkite atskirą vartotojo atvaizdavimo komponentą User.