Question

如何获取属性data-digit和类gauge, gauge-outer, gauge-inner and gauge-digits

多伦多证券交易所

import React from 'react';
import style from './gauge.module.scss';


const Gauge = (props) => {
    const points = 43;
    const radius = 257;
    const max = 100;
    const peaks = [10, 50, 90];
    const step = (max + 1) / points;
    const realPeaks = peaks.map(peak => Math.floor(peak * (1 / step)));
    const hueStep = 120 / points;

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

export default Gauge;

我在const HueStep下面添加了这段代码。

 const gaugeDigits = document.getElementsByClassName('gauge-digits');
    console.log(gaugeDigits)

但是不行，报错：document is undefined

Answer 1

您可以使用 useEffect 在渲染后访问 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>
    </>);
};

注意： 通常你不需要访问 DOM。你的程序应该使用状态，然后让 React 根据这个状态渲染 DOM。

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

1 个答案: