Question

所以我喜欢这个React的东西，我们有这个所谓的“无国籍的”＃39;帮助我们建立一个“哑巴”的功能。零件。现在我想创建一个产生无状态函数的类。为什么你可能会问，我喜欢继承的想法，并希望延伸＆＃39;我的无状态函数基本功能，我说我想添加一个辅助函数作为绑定到函数本身的静态函数。

我最终得到了这段代码

class Stateless {

  constructor() {
    return this.render.bind(this)
  }

  nanny() {
    // do something
  }

  render(props) {
    // yeay! a stateless function!
    // plus i can access nanny by using this.nanny()
  }
}

当我扩展它时，我可以看到继承运行良好。但是，如果那时我初始化类：

const stateless = new Stateless()

为什么即使在stateless.nanny函数内我也无法访问render我可以看到this.nanny是否可访问？ nanny住在哪里？它是否绑定到render函数？

EG：

class Stateless {
  constructor() {
    return this.render.bind(this)
  }

  nanny() {
    console.log('foo')
    return true
  }

  render(props) {
    console.log(this.nanny()) // -> returns 'foo'
    return 'JSX'
    // this should return a JSX
  }
}

const stateless = new Stateless() // -> stateless IS a function

stateless()
// 'foo'
// true
// JSX

stateless.nanny
// undefined

当我打电话给render时显然在this里面，那里有保姆。但是当我在外面提到，保姆不见了。我认为nanny应该是stateless的静态属性，对吧？

Answer 1

如果要从构造函数返回对象 - new将返回该对象而不是正在构造的类的实例（more info）。

因此行

const stateless = new Stateless()

将分配给stateless this.render.bind(this)的变量结果 - 这是对无状态类的方法（函数）的引用，即不是无状态的实例。因此stateless.nanny没有意义 - 因为函数render没有定义这样的属性。另一方面，直接调用绑定render函数 - 产生预期结果。

总而言之 - 我强烈建议你不要从构造函数返回任何东西（除非你正在处理一些非常奇怪的要求，比如控制实例数等）。它使代码难以理解和维护。

Answer 2

如果从构造函数中删除 this.render.bind（this），那么您的示例应该有用。

如果您只是从构造函数中删除 return ，它也应该有效：

constructor() {
  this.render.bind(this)
}

但是，您实际上可能正在寻找可以增强其包装组件的更高阶组件。

您的高阶组件是一个函数，它返回一个类，该类呈现它传递给它的组件：

import React from 'react'

function HigherOrderComponent(WrappedComponent) {

  return class Enhancer extends React.Component {
    constructor(props) {
      super(props)
    }

    exampleFunc() {
      // Code here
    }

    render() {
      return <WrappedComponent exampleprop={ this.exampleFunc } />
    }
  }

}

export default HigherOrderComponent

然后你可以将HigherOrderComponent导入你的无状态哑组件文件并包装导出：

import React from 'react'
import HigherOrderComponent from './HigherOrderComponent'

const DumbComponent = (props) => {
  // Return JSX
  // You can use props.exampleprop
}

export default HigherOrderComponent(DumbComponent)

以下是一些您可以阅读更高阶组件的文章： https://facebook.github.io/react/docs/higher-order-components.html https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

返回函数的JS类

2 个答案: