React.js:如何定义默认属性函数?

IT技术 javascript reactjs
2021-05-27 02:32:51

我的组件使用一个函数来呈现一些内部文本。我想允许我的组件的所有者提供一个自定义函数作为属性。如果没有提供自定义属性,组件将使用它自己的默认功能。很自然地,我变成了getDefaultProps这样:

propTypes: function() {       
  renderText: React.PropTypes.func
};

getDefaultProps: function() {
  return {
    renderText: this._renderText
  };
}

问题是,_renderTextundefined时候getDefaultProps被调用。我可以通过检查是否this.props.renderText已定义并this._renderText在需要时返回来解决此问题但他感觉不像 React 的做事方式。

2个回答

如果您定义renderText函数,它将起作用

getDefaultProps: function() {
  return {
    renderText: function() {
      // do sth
    }
  };
}

我认为您不能this像尝试过的那样使用,因为:

获取默认props

在创建任何实例之前调用此方法,因此不能依赖 this.prop

来源:https : //facebook.github.io/react/docs/component-specs.html#getdefaultprops

你可以使用这个:

Class Test extends Component{
    contrustor(props){
    ...
    }
    notify(data){
        console.log("Yeah!",data);
    }
    return (<div>This is context here.</div>)
}
Test.defaultProps={
    getNotify:Test.prototype.notify
}

即使没有 Redux 或 Flux 等,该解决方案在 react-router 中也能正常工作。