استنساخ Props وحقنها باستخدام cloneElement

مرحبًا

ما هو cloneElement؟

const clone = React.cloneElement(child, { active: true });

لماذا نستخدم cloneElement؟

مثال على شريط علامات التبويب

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

قواعد دمج الخصائص

دمج معالجات الأحداث

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

استبدال children

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

التحقق من نوع العنصر قبل استنساخه

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement مقابل Context

بديل حديث: render props والخطافات

اختبار سريع

مراجعة

اكتمل المقرر