React, shorthand and ComponentDidMount()

help
1

Okay, so I got happily into using React, Redux, Thunk and whatever else there is.

A typical component now looks like this, lifted from the official Redux guide:

import React, { PropTypes } from 'react';
import AppBar from 'material-ui/lib/app-bar';
import FlatButton from 'material-ui/lib/flat-button';

const Titlebar = ({loggedIn, onTitleBarLoginClick}) => (
    <AppBar title="Title"
            iconElementRight={
                <FlatButton label={ loggedIn ? 'Logout' : 'Login' }
                            onTouchTap={ e => onTitleBarLoginClick(e) }
                />
            }
    />
);

Titlebar.propTypes = {
    loggedIn: PropTypes.bool.isRequired,
    onTitleBarLoginClick: PropTypes.func.isRequired
};

export default Titlebar

Now, here’s the thing: Some of my components will use external libraries to manipulate the DOM (for example, a drawing tool using SVG) so I’ll need React’s ComponentDidMount()

So, is there some way I can keep using the above or do I need to go back to React.createClass()?

2

If you want to use React’s lifecycle methods like componentDidMount, then yes, you’ll have to use the React class. Try to avoid using React.createClass though, and use the ES2015 class instead.

import React, { Component, PropTypes } from 'react';
// ..

class Titlebar extends Component {
  ...
}
3

ok, thanks.

(Post may not be shorter than 20 chars)