-1

In the active links section of the react router tutorial, they suggest the following for using active links.

Most links in your site don't need to know they are active, usually just primary navigation links need to know. It's useful to wrap those so you don't have to remember what your activeClassName or activeStyle is everywhere.

We will use a spread operator here, the three dots. It clones our props and in this use case it clones activeClassName to our desired component for us to benefit from.

Create a new file at modules/NavLink.js that looks like this:

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

I was curious to know if there was a way to make something like the below pattern work:

// modules/Navlink.js
import React from 'react'
import { Link } from 'react-router'

export default class extends Link {
    constructor(props) {
        super(props);
        props.activeClassName = 'active'
    }
}
Community
  • 1
  • 1
ericmarkmartin
  • 717
  • 1
  • 8
  • 19

1 Answers1

-1

With ES6 React classes, you can call super as you did above. Default props can be declared after the class is declared as such:

myClass.defaultProps = {
    activeClassName: 'active'
}

Or you may declare default props in the parameters of the constructor like this:

export default class extends Link {
    constructor({firstProp, secondProp, thirdProp = "default value here"}) {
        super(props);
    }
}
Brady Dowling
  • 4,920
  • 3
  • 32
  • 62
  • Thanks. I tried the first suggestion and it worked, but I was wondering if there was a way to implement your second suggestion with an arbitrary number of properties, given that as you have it now it won't work (`constructor` needs to declare `props` as an argument for it to be used). – ericmarkmartin Oct 20 '16 at 20:00