2016-08-05 65 views
4

我有一些依赖于其他道具的默认道具。由于this.props不存在getDefaultProps()我不知道如果使用getInitialState()和状态是更好的方式。React动态默认道具

https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

有没有更好的方法吗?

Button = React.createFactory React.createClass 
    getInitialState: -> 
    className = undefined 
    iconClass = undefined 
    label = undefined 
    switch @props.type 
     when 'save' 
      className = 'btn-primary' 
      iconClass = 'glyphicon glyphicon-floppy-disk' 
      label  = I18n.t('crud.save') 
     when 'save_next' 
      className = 'btn-success' 
      iconClass = 'glyphicon glyphicon-floppy-saved' 
      label  = I18n.t('crud.save_new') 
     when 'cancel' 
      className = 'btn-danger' 
      iconClass = 'fa fa-stop' 
      label  = I18n.t('crud.cancel') 
     else 
      className = 'btn-default' 
    className: className 
    iconClass: iconClass || '' 
    label: label || '' 

propTypes: 
    onClick:  React.PropTypes.func.isRequired 
    type:  React.PropTypes.oneOf(['button', 'save', 'save_next', 'cancel']) 
    className: React.PropTypes.string 
    title:  React.PropTypes.string 
    name:  React.PropTypes.string 
    iconClass: React.PropTypes.string 
    label:  React.PropTypes.string 
    size:  React.PropTypes.oneOf(['xs', 'sm', 'md', 'lg']) 
    disabled: React.PropTypes.bool 
    submit:  React.PropTypes.bool 

getDefaultProps: -> 
    disabled: false 
    className: '' 
    label: '' 
    size: 'sm' 
    submit: false 

render: -> 
    React.DOM.button 
     className: "btn btn-#{@props.size} #{@props.className} #{@state.className}", 
     onClick: @props.onClick(), 
     type: @state.domType 
     title: @props.title, 
     name: @props.name, 
     disabled: @props.disabled, 
     React.DOM.span className: "#{@props.iconClass} #{@state.iconClass}" 
     ' ' 
     @props.label || @state.label 
+1

默认道具是指*默认值*不以任何方式动态显示。在ES6类中,它们被标记为“静态”。你看起来像是混合不同风格的按钮。也许高阶组件在这里会有所帮助。 –

+0

@DavinTryon谢谢,对我看起来很好 –

回答

0

恐怕没有。

getDefaultProps在创建组件实例之前调用函数。

这意味着你不能访问this从这个地方的参考。

+0

我知道,这就是为什么我使用'getInitialState',但看起来不是更好的方法。 –