Stateless functions are a brilliant way to define highly reusable components. They don't hold state; they're just functions.
const MyExample = () => <div>Hello World!</div>
They get passed props and context.
const MyExample = (props, context) => {
return <div style={{color: context.color}}>Hi {props.name}</div>
}
They can define local variables, where a function block is used.
const MyExample = (props, context) => {
const style = {
fontWeight: "bold",
color: context.color,
}
return <div style={style}>{props.name}</div>
}
But you could get the same result by using other functions.
const getStyle = context => ({
fontWeight: "bold",
color: context.color,
})
const MyExample = (props, context) => {
return <div style={getStyle(context)}>{props.name}</div>
}
They can have defined defaultProps, propTypes and contextTypes.
MyExample.propTypes = {
name: PropTypes.string.isRequired
}
MyExample.defaultProps = {
name: "Guest"
}
MyExample.contextTypes = {
color: PropTypes.string
}
Top comments (0)