ค้นหาเว็บไซต์

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