NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈，支持Taro多端适配。

期待您早日成为我们共建大军中的一员！

咚咚群号：1025679314微信群：hanyuxinting（暗号：NutUI-React）

官网GitHub: 点击进入

欢迎共建、使用！

NutUI React 2.x 版本新增了 SafeArea（安全区）组件。本文主要介绍 SafeArea 组件的实现思路。

背景

开发者在使用 Cascader 或 Picker 组件的时候，由于各个组件自己实现安全区域，导致代码重复，而且有些带有弹出交互的组件并没有添加安全区域的逻辑，导致展示问题。所以针对这样的问题，NutUI React 在 2.x 的版本中增加 SafreArea 组件，并统一应用于需要安全区域的组件上。

实现逻辑

安全区域组件需要考虑安全区域出现的位置，所以这里给安全区域暴露了 position 属性，用来控制安全区域的生效位置。除了对外暴露控制属性外，还需要考虑组件的使用。

声明式的组件使用主要包括两种类型：父子节点和兄弟节点。

<SafeArea>
   <DemoComponent />
</SafeArea>

<DemoComponent />
<SafeArea />

在实现上我们采用了兄弟节点的方式。SafeArea 组件通常情况下和其他组件不会有状态或逻辑上的耦合，而且降低嵌套层级，不但可降低组件的实现复杂度，还能提高性能。除此之外，兄弟节点的方式可以更自然的映射到 UI 结构。

确定了使用方式之后，就到了具体组件的逻辑开发。对于 SafeArea 组件来说，逻辑非常简单，只需在 div 上设置一些 css 样式即可。

export interface SafeAreaProps extends BasicComponent {
    position: 'top' | 'bottom'
}
const classPrefix = 'nut-safe-area'
export const SafeArea: FC<SafeAreaProps> = (props) => {
    return (
        <div
            className={classNames(
                classPrefix,
                `${classPrefix}-position-${props.position}`
            )}
        />
    )
}

在样式中我们提供了 css 变量，可以通过 css 变量来调整安全区域的高度。

.nut-safe-area {
  display: block;
  width: 100%;
  &-position-top {
    padding-top: calc(
      env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
    );
  }
  &-position-bottom {
    padding-bottom: calc(
      env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
    );
  }
}

到这里 SafeArea 组件的实现思路就讲述完了。总的来说我们拿了一个简单的组件，阐述了 React 中声明式组件两种使用方式的差别，以及选择何种使用方式来实现组件的考量点。希望能抛砖引玉，得到大家对于组件设计的一些思路和独门诀窍。

加入我们

再次期待您早日成为我们共建大军中的一员！

一起共建，一起使用！

做站内最优秀的开源组件库！

咚咚群号：1025679314赶紧加入我们吧！！