Question

我有一个扩展自定义组件的类，该类扩展了另一个自定义组件。我想重写handleReload()函数以添加一些额外的功能。我不想完全改变它的行为。问题是即使页面加载时也出现错误，并且它没有任何功能。

总结一下，共有3层组件，父级->子级->孙子级，handleReload()在子级中声明。

export default class Child extends Parent {

  handleReload() {
    return () => {
      const { name, load } = this.props
      load(name)
    }
  }

  <ReloadButton
    value={'action.reload'}
    onClick={::this.handleReload()}
    privilege={`${metaForm(name)}:Read`}
  />

}

现在我想做的是这样的：

export class GrandChild extends Child {

  handleReload() {
    super.handleReload()
    // something else here
 }
}

Answer 1

您需要评估handleReload中的某个内容以告诉它是否来自grandChild，然后使用某种if语句来执行 this 或那个。

// ----- parent.js
export class ParentContainer extends Component {

    import {GrandChild} from './components/grandchild';

    handleReload = type => {
      if(type === 'grandchild'){
        // something
      } else {
        // something else
      }
    }

    render() {
      return (
            <GrandChild onReload={this.handleReload} /> 
      )
    }
  }

通过道具传回的例子

// /  ----- /components/grandchild.js 
export class GrandChild extends Component {

    render() {
      return (
            <button onClick={this.props.onReload('grandchild')}
      );
    }
 }

在ReactJS中重写父组件方法

1 个答案: