Javascript 如何在没有组件的情况下获取react中的属性

如何获取属性

数据位数

和类

仪表、仪表外部、仪表内部和仪表位数

TSX

---

但它不起作用，错误是：文档未定义

您可以在呈现DOM后使用

useffect

访问DOM：

useEffect(()=>{
    const gaugeDigits = document.getElementsByClassName('gauge-digits');
    console.log(gaugeDigits)
}, [])

最好也使用

useRef

：

const Gauge = (props) => {
    const ref = useRef( null );

    useEffect(()=>{
        console.log( 'ref.current:', ref.current );
    }, [])

    return (<>
        <div className={style['gauge']} data-digit={50} ref={ ref } >
            <div className={style['gauge-outer']}></div>
            <div className={style['gauge-inner']}></div>
            <div className={style['gauge-digits']}></div>
        </div>
    </>);
};

const-Gauge=（道具）=>{
const ref=useRef（null）；
useffect（（）=>{
console.log（'ref.current:'，ref.current）；
}, [])
返回(
);
};

注意：

---

通常您不需要访问DOM。您的程序应该使用状态，然后让React根据此状态呈现DOM。

这是为了调试目的还是在源代码中？95%的情况下，如果您在React中执行直接DOM查询/操作，那么您是在做错事并使用反模式。此外，还不清楚发生这种情况的背景；你能在你的问题中创建一个代码片段吗？不要直接访问DOM（而不是用React的方式）。在您的情况下，使用

useState

例如：

const[digits，setDigits]=useState（50）

和使用类似的

如何，如何获得className

gauge

的属性？还有属性数据位吗@Kiranvj1您希望在哪里获得属性，以及在什么条件下获得属性？如果你能更新你的用例，你可能会得到更多的解决方案。由于React使用虚拟DOM，因此直接访问DOM的任何一种方法都不会得到期望的结果。有关您的错误

文档的任何信息都未定义

请尝试

窗口。文档..

useEffect(()=>{
    const gaugeDigits = document.getElementsByClassName('gauge-digits');
    console.log(gaugeDigits)
}, [])

const Gauge = (props) => {
    const ref = useRef( null );

    useEffect(()=>{
        console.log( 'ref.current:', ref.current );
    }, [])

    return (<>
        <div className={style['gauge']} data-digit={50} ref={ ref } >
            <div className={style['gauge-outer']}></div>
            <div className={style['gauge-inner']}></div>
            <div className={style['gauge-digits']}></div>
        </div>
    </>);
};