reactjs - สืบทอดคอมโพเนนต์ของ react ด้วย mobx
ฉันมีคอมโพเนนต์ที่สืบทอดจากคลาสนามธรรมและใช้ตัวตกแต่งของ mobx แบบนี้:
@inject("matrixStore")
@observer
export default class DayRow<T extends IAbstractRowProps = IAbstractRowProps> extends AbstractRow<T> {
// ...
}
ฟังก์ชัน render อยู่ในคอมโพเนนต์ AbstractRow เอง
ฉันสืบทอดจาก DayRow พร้อมกับคอมโพเนนต์อื่น:
@inject("matrixStore")
@observer
export default class DayFinderRow extends DayRow<IDayFinderRowProps> {
}
แต่เมื่อฉันพยายามเรนเดอร์ DayFinderRow จะมีคำเตือนจาก mobx: Mobx observer: คุณกำลังพยายามใช้ 'observer' กับคอมโพเนนต์ที่มี 'inject' อยู่แล้ว กรุณาใช้ 'observer' ก่อนที่จะใช้ 'inject' และเมื่อฉันดีบักคอมโพเนนต์ที่เรนเดอร์ มันจะแสดง inject-DayRow-with-matrixStore#0.render() แทนที่จะเป็น DayFinderRow#0.render() ตามที่คาดไว้
เมื่อฉันลบตัวตกแต่งจาก DayFinderRow การเตือนก็หายไป แต่แทนที่จะเป็นคอมโพเนนต์ DayFinderRow กลับมีการแสดงผล DayRow แทน
ฉันต้องการตัวตกแต่งบนทั้งสองคอมโพเนนต์ เนื่องจากฉันเรนเดอร์ทั้งสอง แต่ต้องการสืบทอด DayFinderRow จาก DayRow เพราะฉันต้องการเปลี่ยนพฤติกรรมของฟังก์ชันเพียงหนึ่งฟังก์ชันเท่านั้น
นี่เป็นไปได้กับ mobx ไหม?
คำตอบ #1
Facebook กล่าวว่าการสืบทอดไม่เหมาะสม นี่คือคำอธิบายและคำแนะนำของพวกเขา
ไม่มีเหตุผลที่ดีที่ฉันจะใช้ React Component เป็นแบบแผน การประกอบฟังก์ชันมีความหมายมากกว่าต่อฉัน
นี่คือสิ่งที่เฟซบุ๊กพูดเกี่ยวกับเรื่องนั้น:
https://reactjs.org/docs/composition-vs-inheritance.html