functional components are defined like so:
|
1 2 3 4 5 |
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } export default Welcome; |
After importing it, you can call the component like in this example:
|
1 2 3 4 5 6 7 8 9 |
import Welcome from './Welcome'; function App() { return ( <div className="App"> <Welcome /> </div> ); } |
Some components don’t know their children ahead of time.
We recommend that such components use the special children prop to pass children elements directly into their output:
|
1 2 3 4 5 6 7 |
function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); } |
This lets other components pass arbitrary children to them by nesting the JSX:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function WelcomeDialog() { return ( <FancyBorder color="blue"> // FancyBorder's prop.children will reference this part <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft! </p> </FancyBorder> ); } ReactDOM.render( <WelcomeDialog />, document.getElementById('root') ); |
Furthermore, you can use property extraction by using prop as an object and declaring the property that we’re looking for:
|
1 2 3 |
export const test = ({ children }) => { return <> {children} </> } |