反应动态默认道具

时间:2016-08-05 13:15:38

标签: reactjs

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

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 个答案:

答案 0 :(得分:0)

我害怕没有。

在创建组件实例之前调用

getDefaultProps函数。

这意味着您无法访问此地点的this引用。