reactjs - จำกัดลูกที่อนุญาตใน React TypeScript

การใช้ TypeScript ในโปรเจกต์ React มีวิธีใดบ้างที่จะบังคับข้อจำกัดบางอย่างบน children ที่อนุญาตของคอมโพเนนต์? การบังคับในเวลาคอมไพล์เป็นสิ่งที่ต้องการ แต่การบังคับในเวลารันไทม์ก็อาจเป็นประโยชน์เช่นกัน

ในกรณีของผม ผมมีคอมโพเนนต์ หนึ่ง เรียกมันว่า <ClickTracker> และคอมโพเนนต์นี้คาดหวังให้มีลูกเพียงตัวเดียวพร้อมพร็อพแบบ callback คือ onClick และมันจะเพิ่มฟังก์ชันเพิ่มเติมให้กับ callback (ติดตามการคลิกในไลบรารีภายนอก)

นี่ใช้งานได้ดีตราบใดที่เด็กภายใน <ClickTracker> ใช้ประโยชน์จากพร็อพ onClick จริง ๆ (องค์ประกอบ HTML ทุกตัวมีสิ่งนี้ เช่น) แต่จะล้มเหลวโดยไม่มีการแจ้งเตือนในกรณีอื่น

ตัวอย่างเช่น วิธีนี้ใช้ได้:

<ClickTracker>
  <div>Hello</div>
</ClickTracker>

แต่นี่ใช้ไม่ได้:

class Hello extends Component<{}, {}> {
  render() {
    return <div>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

แต่นี่ใช้ได้เพราะมันส่งต่อ onClick ไปยังองค์ประกอบ HTML:

class Hello extends Component<{onClick: MouseEventHandler}, {}> {
  render() {
    return <div onClick={this.props.onClick}>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

อย่างที่คุณเห็น ผมอยากจะมีความปลอดภัยเกี่ยวกับสิ่งที่สามารถใส่เข้าไปใน <ClickTracker> ขึ้นอยู่กับ props ของลูก หรือถ้ามีวิธีอื่นที่สามารถทำได้ก็เช่นกัน

คำตอบ #1

ปัจจุบัน ยังไม่มีวิธีใดที่จะบังคับใช้ชนิดของ children ด้วย TypeScript ได้

มีข้อมูลเพิ่มเติมในประเด็นนี้

คำตอบ #2

หรือถ้ามีวิธีอื่นที่สามารถทำได้

เหตุการณ์คลิกจะฟองขึ้นข้างบน เว้นแต่บางส่วนประกอบจะหยุดการแพร่กระจาย (ซึ่งไม่ใช่พฤติกรรมเริ่มต้นของส่วนประกอบพื้นฐาน) ดังนั้นคุณสามารถ:

<div onClick={()=>alert('still noted')}>
  <Hello />
</div>

และ div นั้นคือ ClickTracker 🌹