主页 / coding / 问题 / 79410098
Accepted
mikeb
Asked: 2025-02-04 05:49:32 +0800 CST

React Carbon 设计组件中的渲染方法

  • 772

我正在使用 Carbon 设计和 React - 以下为示例：

<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 
                   ...</>)
}/>

我不明白这里的 render 方法。这种方法和使用“children”有什么区别，比如：

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

为什么用第一种方式而不是第二种方式实现？我认为它的可读性差很多...

reactjs

1 个回答

  1. Best Answer

    传递渲染函数被称为render prop

    术语“render prop”是指使用值为函数的 prop 在 React 组件之间共享代码的一种技术。

    具有渲染 prop 的组件采用返回 React 元素的函数并调用它，而不是实现自己的渲染逻辑。

    如果isSideNavExpanded和onClickSideNavExpand存在于之内HeaderContainer，则不能HeaderMenuButton像第二个例子中那样将它们传递给。

    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
}} />
    • 1

相关问题