【问题标题】:React dynamic default propsReact 动态默认道具
【发布时间】:2016-12-11 22:18:08
【问题描述】:

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

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

【问题讨论】:

  • 默认道具意味着 defaults 不是动态的。在 ES6 类中,它们被标记为 static。你看起来像是在混合不同风格的按钮。也许高阶组件在这里会有所帮助。
  • @DavinTryon 谢谢,我觉得很好

标签: reactjs


【解决方案1】:

恐怕没有。

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

这意味着您无法从该位置访问this 引用。

【讨论】:

  • 我知道,这就是我使用getInitialState 的原因,但看起来不是更好的方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-05-26
  • 2018-10-07
  • 2019-03-31
  • 2019-12-27
  • 1970-01-01
  • 2020-01-25
  • 2018-10-13
相关资源
最近更新 更多