Oba drží data, která ovlivňují to, co komponenta vykreslí, ale liší se v tom, kdo data vlastní a zda se mohou změnit.
- props jsou předány do komponenty od své rodičovské komponenty. Jsou pouze pro čtení — komponenta je nesmí nikdy modifikovat.
Oba drží data, která ovlivňují to, co komponenta vykreslí, ale liší se v tom, kdo data vlastní a zda se mohou změnit.
// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
Data se pohybují dolů (rodič → dítě přes props) a změny se pohybují nahoru (dítě požádá rodiče, aby něco změnil prostřednictvím callback prop jako onChange). Tento jednosměrný tok je to, co činí React aplikace předvídatelné.
props.x = 1) je chyba — React se znovu nevykreslí a porušili jste vlastnictví rodiče. Chcete-li „změnit prop", zavolejte callback, který vám rodič dal, aby rodič aktualizoval svůj vlastní state a předal novou hodnotu dolů.