Creating locaLinks component solution
Creates a nav-helper component in the components directory
Remark about passing an
Usual React setup (import React, export default createClass, then render method):
// **** nav-helper.js ****
import React from 'react'
import localLinks from 'local-links'
export default React.createClass({
// this is for the React devtool, see previous note
displayName: 'NavHelper',
// copy form previous note
onClick (event) {
const pathname = localLinks.getLocalPathname(event)
if(pathname){
event.preventDefault()
app.router.history.navigate(pathname)
}
}
render () {
return (
<div onClick={this.onClick}>
{this.props.children}
</div>
)
}
})
If you want to set additional properties to the "click handler" div, like a CSS classname:Using the ES6 spread operator to add these additional properties to the
div
element:<div {...this.props} onClick={this.onClick}>
render () {
return (
<div {...this.props} onClick={this.onClick}>
{this.props.children}
</div>
)
}
Demos how it works.
In his main layout.js file, he imports this component as NavHelper and wraps everything with NavHelper:
// **** layout.js ****
import React from 'react'
// ++++ 1. import navhelper
import NavHelper from '../components/nav-helper'
export default React.createClass({
// ++++ 2. sets displayName for dev tools
displayName: 'Layout',
// ---- 3. delete old onClick handler
// onClick (event) {
// deleted
// }
render () {
return (
// ++++ 4. wrap the JSX with NavHelper
// note the className
<NavHelper className="something">
<nav className="top-nap">
...
{this.props.children}
</nav>
</NavHelper>
)
}
})
Yes, this will add an extra div, for handling the clicks... (for now)the ES6
{...this.props}
will add className="something"
to the navhelper component div element (see above)Also wraps the component in public.js with navhelper. Removes the div in public.js and passes its
className
property to the navhelper.He only had to add navhelper to public and repos layouts no other child elements, since the clicks will bubble up.
Remark about passing an .onClick
handler in this.props
It will cancel out the
this.onClick
on the element (see above in navhelper)