36、React 组件的 Refs、Portals 与单元测试

React 组件的 Refs、Portals 与单元测试

1. Refs 和 Portals 的使用

在 React 开发中，Refs 和 Portals 是两个重要的特性。Refs 可以让我们直接访问组件渲染的内容，这使得非受控表单元素成为可能。而 Portals 则允许内容在应用的组件层次结构之外进行渲染。

以下是一个使用 ForwardFormField 组件的示例代码：

<ForwardFormField label="Name" ref={ this.fieldRef } />
<div className="text-center m-2">
    <button className="btn btn-primary m-1"
            onClick={ this.focusLocal }>
        Focus Local
    </button>
    <button className="btn btn-primary m-1"
            onClick={ this.focusPortal }>
        Focus Portal
    </button>
</div>

PortalWrapper 元素可作为 ForwardFormField 的容器。通过 Portal 显示的内容会被视为应用组件内容的一部分，即使 Portal 的内容在应用外部渲