Tip 1: props.children
|
1 2 3 4 5 6 7 8 |
const Picture = (props) => { return ( <div> <img src={props.src}/> {props.children} </div> ) } |
|
1 2 3 4 5 6 7 8 9 |
render () { return ( <div className='container'> <Picture key={picture.id} src={picture.src}> //what is placed here is passed as props.children </Picture> </div> ) } |
Instead of invoking the component with a self-closing tag <Picture /> if you invoke it will full opening and closing tags <Picture> </Picture> you can then place more code between it and display using this.props.children (props.children for stateless components) . This decouples the <Picture> component from its content and makes it more reusable. Tip 2: Stateless Components […]