Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React dynamic default props

Tags:

reactjs

I have some default props that depends on other prop. As this.props doesn't exists inside getDefaultProps() I wonder if using getInitialState() and states is the better way of doing it.

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

Is there a better approach?

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
like image 684
Lucas Ferronato Avatar asked Aug 05 '16 13:08

Lucas Ferronato


People also ask

What are the default props in React?

What are default props in React? Default props can be used to define any props that you want to be set for a component, whether or not a value is actually passed in from the parent component.

Can we have default values for props in React?

Default Prop Values Since ES2022 you can also declare defaultProps as static property within a React component class. For more information, see the class public static fields. This modern syntax will require a compilation step to work within older browsers.

How do I set default value in props React?

For example, let's create a CustomButton class in React that takes color as a prop. To set a default value for the color prop, use the defaultProps property of CustomButton to set the default value of color to blue .

Is React defaultProps deprecated?

You May Not Need defaultProps ​ As per this tweet, defaultProps will eventually be deprecated. You can check the discussions here: Original tweet.


1 Answers

I'm afraid no.

getDefaultProps function is called before component instance is created.

It's meant that you can't have access to this reference from this place.

like image 141
1ven Avatar answered Oct 16 '22 04:10

1ven