การโคลนและแทรกพร็อพส์ด้วย 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
  },
})

การแทนที่องค์ประกอบลูก

// 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 เทียบกับบริบท

ทางเลือกสมัยใหม่: พร็อพสำหรับเรนเดอร์และฮุก

ตรวจสอบความเข้าใจ

สรุปทบทวน

จบหลักสูตร