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属性不会设置其实际原型。设置对象原型的唯一可靠方法是is on the roadmap函数。因此，您尝试这样做的方式将无法可靠地运作。

但即使你以正确的方式做到了，你也不应该这样做：

由于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成为你的父组件，但那将是糟糕的面向对象设计，并且有很多关于为什么Object.setPrototypeOf的好论据。

Answer 2

你可以尝试像这里一样使用Mix-ins 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)) { }

我们可以将原型分配给子组件吗？

2 个答案: