getElementById(id: string)

版本要求:
@ray-js/ray≥0.5.10

描述

获取页面节点

参数

参数类型必填说明
idstring是节点的 id 属性值

返回值

类型:Promise<NodesRef>
节点引用对象,节点不存在时返回 null

引用对象

interfaceNodesRef
属性类型描述
获取节点布局位置(left, right, top, bottom, width, height)
获取节点滚动位置(scrollLeft, scrollTop)
获取节点指定字段信息

示例代码

基础用法

import React from 'react';
import { View, Button, Text, getElementById } from '@ray-js/ray';

export default function Demo() {
  const handleGetElement = async () => {
    const element = await getElementById('targetView');
    console.log('节点引用:', element);
  };

  return (
    <View style={{ padding: 20 }}>
      <View
        id="targetView"
        style={{
          height: 100,
          backgroundColor: '#1890ff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text style={{ color: '#fff' }}>目标节点</Text>
      </View>
      <Button style={{ marginTop: 10 }} onClick={handleGetElement}>
        获取节点引用
      </Button>
    </View>
  );
}