19.11.2024 в 19:46
Тим Тоуди
Передача данных от дочернего компонента pros к родительскому в React TypeScript
Используя простые методы, можно передавать данные от дочернего элемента к родительскому. Это полезно, например, при создании основного компонента, или при необходимости передать пользовательские элементы в компонент select.
Ниже представлен пример реализации передачи данных с использованием простого подхода:
import React from "react";
// Define the type for the options
type Option = {
label: string;
value: string;
};
// Props for the ChildClass component
interface ChildClassProps {
// A function prop that takes an `Option` and returns a React node
customItems: (option: Option) => React.ReactNode;
}
const ParentClass: React.FC = () => {
return (
<ChildClass
customItems={(props: Option) => (
<div>
<div>{props.value}</div>
</div>
)}
/>
);
};
const ChildClass: React.FC<ChildClassProps> = ({ customItems }) => {
// Options array with objects that match the `Option` type
const options: Option[] = [
{ label: "green", value: "green" },
{ label: "blue", value: "blue" },
{ label: "red", value: "red" },
{ label: "yellow", value: "yellow" },
];
return (
<div>
<span>Child class</span>
{/* Iterate over the options and call `customItems` to render the custom content */}
{options.map((item, index) => (
<div key={index}>
{customItems(item)}
</div>
))}
</div>
);
};
export default ParentClass;
Компонент ParentClass
ParentClass передает функцию customItems компоненту ChildClass. Эта функция задаёт вид отображения каждого элемента. В customItems можно передать любой пользовательский компонент.
Компонент ChildClass
ChildClass итерирует по массиву опций, вызывая функцию customItems для каждого элемента. Это даёт ParentClass возможность настроить рендеринг опций по своему усмотрению.
