# 组件实例获取 | 使用 Tango 构建你的低代码生产力工具
TangoBoot 支持快捷设置和获取组件的实例。

Skip to main content
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# 组件实例获取

TangoBoot 支持快捷设置和获取组件的实例。

## 借助 `withRef` 注册组件实例​

`withRef` 是 TangoBoot 内置的实例注册 HOC，可以快捷的进行组件实例的注册和获取。基本的用法如下：

    class Input extends React.Component {
      foo() {}

      render() {
        return <input {...this.props} />;
      }
    }

    const ClassInput = withRef()(Input);

借助 `withRef` 包裹组件后，当新的组件实例被设置 `id` 属性时，会自动将对应的实例注册到 `tango.refs` 中。例如：

    export function Basic() {
      const inputRef = useRef();
      useEffect(() => {
        console.log(tango.refs.classInput, inputRef.current);
      }, []);

      // 设置 id 属性后，会自动组件实例到 `tango.refs` 中
      return <ClassInput id="classInput" ref={inputRef} />;
    }