javascript - How "props.children" works on a React component? - Stack Overflow

admin管理员组

文章数量:1395889

I was working on the code of a practice for React, but I stopped because I have to make a navigation bar be shared among other pages

I found the next solution and it works but I don't know how exactly works; this is for a course project.

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

I can't really know what really {props.children} does and how if Layout ponent start holding other ponents the Navbar ponent still appears

<Layout>
  <Switch>
    <Route exact path="/badges" ponent={Badges}/>
    <Route exact path="/badges/new" ponent={BadgeNew} />
  </Switch>
</Layout>

What happens behind the scenes?

I was working on the code of a practice for React, but I stopped because I have to make a navigation bar be shared among other pages

I found the next solution and it works but I don't know how exactly works; this is for a course project.

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

I can't really know what really {props.children} does and how if Layout ponent start holding other ponents the Navbar ponent still appears

<Layout>
  <Switch>
    <Route exact path="/badges" ponent={Badges}/>
    <Route exact path="/badges/new" ponent={BadgeNew} />
  </Switch>
</Layout>

What happens behind the scenes?

• javascript
• reactjs
• ecmascript-6
• react-router

Share Improve this question Follow edited Jul 24, 2019 at 7:58 wuarmin 4,02544 gold badges2020 silver badges3737 bronze badges asked Jul 24, 2019 at 4:25 Pablo VerduzcoPablo Verduzco 12122 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

props.children means that React will render whatever u put between Layout ponent.

For ex, if u put a div block between Layout ponents, props.children will be that div.

Every JSX code that you put inside the Layout-tag, will be placed in children property of props-object of the Layout Component.

<Layout>
  <div>this is a child</div>
  <AnotherReactComponentAsLayoutChild/>
</Layout>

本文标签： javascriptHow quotpropschildrenquot works on a React componentStack Overflow