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} />
    }
}

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

Answer 1

＆＃13;

class SomeChild extends BaseComponent {

    constructor(props) {
        super(props);
    }

    foo = () => {

    }

    render() {
        <Child foo={this.foo} />
    }
}

＆＃13;

如果你只是将BaseComponent绑定到这个方法并使用es6，那么对你的方法使用箭头函数会更简单。

Answer 2

Janaka对于使用箭头功能是正确的，但您的_bindProps实施也存在问题。它返回一个绑定函数数组，但您需要返回属性的键/ 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返回。

我有兴趣知道你为什么要这样做？这不是我在任何时候通常必须做的事情。

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

2 个答案: