我們可以給兒童組件分配原型嗎？

Question

React可以將原型分配給子組件，而不是傳遞槽道具？ 我們可以做這樣的事情：

import React, { Component } from 'react' 
import Child from './Child' 

export default class Parent extends Component { 
    constructor(){ 
    super() 
    this.parentMethod = this.parentMethod.bind(this) 
    } 
    parentMethod() { 
    // this method is going to be assigned to Child 
    console.log('I am invoked from child') 
    } 

    render() { 
     Child.prototype = this.parentMethod 
     // now 
     return <Child /> 
    } 

} 


//Child.js 

import React, { Component } from 'react' 
export default class Child extends Component { 
    constructor() { 
    super() 
    } 

    handleButton() { 
     this.parentMethod() 
    } 
    render() { 
     return (
     <button onClick={this.handleButton.bind(this)} > click </button> 
    ) 
    } 
} 

我不是很肯定，如果我做錯了什麼，但代碼的作品？

Answer 1

首先，更改對象的.prototype屬性不會設置其實際原型。設置對象原型的唯一可靠方法是Object.setPrototypeOf函數。所以你試圖做的方式將無法可靠地工作。

但是，即使你正在做正確的方式，你真的不應該這樣做呢：

由於ES6 class ES超過原型只是語法糖，你應該不做到這一點。你的React組件依賴於Component原型，以確保他們的生命期方法在正確的時間被調用，並且它們的道具在對象構建時被正確處理。試圖改變React組件的原型只會搞亂它，並使其停止像一個真正的React組件。

如果您希望您的子組件能夠訪問其父組件的方法，則正確的方法是將該方法作爲道具傳遞。

例如：

export default class Parent extends Component { 
    // React component constructors receive props 
    constructor (props){ 
    super(props) 
    this.parentMethod = this.parentMethod.bind(this) 
    } 
    parentMethod() { 
    // this method is going to be assigned to Child 
    console.log('I am invoked from child') 
    } 

    render() { 
     return <Child parentCallback={this.parentMethod} /> 
    } 

} 


//Child.js 

import React, { Component } from 'react' 
export default class Child extends Component { 
    //no constructor needed if you just call super() 

    render() { 
     return (
     <button onClick={this.props.parentCallback} > click </button> 
    ) 
    } 
} 

從理論上說，你可以有你的孩子組件extend你的父組件，但是這將是糟糕的面向對象設計，並且有很多很好的論據爲什麼you should avoid using extends-based inheritance。

Answer 2

你可以嘗試使用混合插件喜歡這裏 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

var calculatorMixin = Base => class extends Base { 
    calc() { } 
}; 

var randomizerMixin = Base => class extends Base { 
    randomize() { } 
}; 

class Foo { } 
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }