reactjs - Render method in React carbon design component - Stack Overflow

admin管理员组

文章数量:1305075

I'm working with Carbon design & React - following the example:

<HeaderContainer render={({
        isSideNavExpanded,
        onClickSideNavExpand
      }) => {
        console.log("Rendering", onClickSideNavExpand)
        console.log("Rendering", isSideNavExpanded)
        return (<> ... 
                   <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
                   my stuff 
                   ...</>)
}/>

I don't understand the render method here. What is the difference between this method and between using "children", something like:

<HeaderContainer>
 <> 
  <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
  ... my stuff ... 
 </>
</HeaderContainer>

Why implement it the first way instead of the second? I think it's much less readable...

I'm working with Carbon design & React - following the example:

<HeaderContainer render={({
        isSideNavExpanded,
        onClickSideNavExpand
      }) => {
        console.log("Rendering", onClickSideNavExpand)
        console.log("Rendering", isSideNavExpanded)
        return (<> ... 
                   <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
                   my stuff 
                   ...</>)
}/>

I don't understand the render method here. What is the difference between this method and between using "children", something like:

<HeaderContainer>
 <> 
  <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
  ... my stuff ... 
 </>
</HeaderContainer>

Why implement it the first way instead of the second? I think it's much less readable...

• reactjs
• carbon-design-system

Share Improve this question Follow asked Feb 3 at 21:49 mikebmikeb 11.3k88 gold badges6969 silver badges131131 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

passing a render function is called render prop

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

if isSideNavExpanded and onClickSideNavExpand exist inside of HeaderContainer, you can't pass them to HeaderMenuButton as in your second example.

const Component = ({render}) => {
  const localData = ...      // this lies inside the children component
  return render(localData)   // this is how the parent access the data
}

<Component render={(dataFromComponent) => {  // access data from Component
  ...do something with data
  return view
}} />

本文标签： reactjsRender method in React carbon design componentStack Overflow