ES6 的可重用基础 React 组件绑定问题

Question

创建了一个基础的 React 组件来继承：

import { Component } from 'react';

class BaseComponent extends Component {
    constructor(props) {
        super(props);
    }

    _bindProps(...methods) {
        return methods.map(method => this[method].bind(this))
    }
}

export default BaseComponent;

还有我的子组件：

class SomeChild extends BaseComponent {

    constructor(props) {
        super(props);
    }

    foo() {

    }

    render() {
        const props = this._bindProps('foo');
        <Child {...props} />
    }
}

但是，我在return methods.map(method => this[method].bind(this)) 线上收到了Cannot read property 'bind' of undefined。我怎样才能做到这一点，即。将方法从父组件传递给子组件，当从子组件调用时，让其 this 值引用父组件。

Answer 1

class SomeChild extends BaseComponent {

    constructor(props) {
        super(props);
    }

    foo = () => {

    }

    render() {
        <Child foo={this.foo} />
    }
}

如果您只是使用 BaseComponent 将（this）绑定到方法并使用 es6，那么为您的方法使用箭头函数会更简单。

Answer 2

Janaka 仅使用箭头函数是正确的，但您的 _bindProps 实现也存在问题。它返回一个绑定函数数组，但您需要返回一个 key/val 属性对象。将您的 _bindProps 定义更新为：

_bindProps(obj) {
  Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this));
  return obj;
}

用一个对象调用它就可以了：

class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  _bindProps(obj) {
    Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this));
    return obj;
  }
}

class SomeChild extends BaseComponent {

  constructor(props) {
    super(props);
    this.name = 'Jack'
  }

  foo() {
    return this.name;
  }

  render() {
    const props = this._bindProps({
      foo: this.foo,
    });
    console.log('props', props);
    return <Child {...props} />
  }
}

您可以稍微整理一下上面的内容，但现在这样做是正确的，如果您在子组件中调用 this.props.foo()，您将返回 Jack。

我很想知道您为什么要这样做？这不是我通常在任何时候都必须做的事情。