Javascript React getElementById类型脚本

当我在纯反应中使用它时

const Fleet = () => {

    const closeSm = () => {
        document.getElementById("mysideMenu").style.width = '0';
        document.getElementById("pg-content").style.marginLeft='0';
    }

    const openSM = () => {
        document.getElementById("mysideMenu").style.width = '250px';
        document.getElementById("pg-content").style.marginLeft='250px';
    }

    const sideMenu = () => (
        <>
            <div id='mysideMenu' className='sidemenu'>
                <a href='javascript:void(0)' className='close' onClick={closeSm} >&times;</a>
            <div className='sm-wrapper'>
                <a href='#'>Home</a>
                <a href='#'>Portfolio</a>
                <a href='#'>About</a>
                <a href='#'>Contact</a>
            </div>
            </div>
            <div id='pg-content'>
                <div style={{fontSize:'50px', cursor:'pointer', color:'#5b5b5b'  }} onClick={openSM} >&#9776;</div>
                    <h1>Side menu</h1>
                    <span>Tutorial</span>
            </div>
        </>
    )

const Fleet=（）=>{
const closeSm=（）=>{
document.getElementById（“mysideMenu”）.style.width='0'；
document.getElementById（“pg content”）.style.marginLeft='0'；
}
常量openSM=（）=>{
document.getElementById（“mysideMenu”）.style.width='250px'；
document.getElementById（“pg content”）.style.marginLeft='250px'；
}
常量侧菜单=（）=>(
☰
配菜
辅导的
)

它工作得很好，但当我更改为TypeScript时，如下所示：

const Fleet = () => {

    const myElement: HTMLElement | any = document.getElementById('mysideMenu');
    const myContent: HTMLElement | any = document.getElementById('pg-content');
    
    
    const closeSm = () => {
        myElement.style.width = '0';
        myContent.style.marginLeft='0';
    }

    const openSM = () => {
        myElement.style.width = '250px';
        myContent.style.marginLeft='250px';
    }

    const sideMenu = () => {
        
        
        
        return(
        <>
            <div id='mysideMenu' className='sidemenu'>
                <button style={{fontSize:'60px'}} className='close' onClick={closeSm} >&times;</button>
            <div className='sm-wrapper'>
                <img src={Ferte} alt='/'/>
                <h2 className='text-center mt-5'>Saint Georges</h2>
                <a href='#'>About</a>
            </div>
            </div>
            <div id='pg-content'>
                <div style={{fontSize:'30px', cursor:'pointer', color:'#5b5b5b'  }} onClick={openSM} >&#9776;</div>
                    <h1>Side menu</h1>
                    <span>Tutorial</span>
            </div>
        </>)
    }

const Fleet=（）=>{
const myElement:HTMLElement | any=document.getElementById（'mysideMenu'）；
const myContent:HTMLElement | any=document.getElementById（'pg-content'）；
const closeSm=（）=>{
myElement.style.width='0'；
myContent.style.marginLeft='0'；
}
常量openSM=（）=>{
myElement.style.width='250px'；
myContent.style.marginLeft='250px'；
}
常量侧菜单=（）=>{
返回(
&时代；
圣乔治
☰
配菜
辅导的
)
}

它不是很好用。它是打开一个侧栏。我不知道为什么我有这个问题

这是我的完整组件。第一个是纯React，第二个是Typescript。正如你所看到的一样。但由于任何原因，Typescript不起作用，我的意思是，如果出于任何原因，我编辑像素并保存在VisualCode中，会神奇地起作用，但如果我重新加载页面不起作用。我知道这是一个奇怪的问题，因为我在这里问他

您很少希望直接为React组件操作DOM

这里最好的解决方案是使用

状态

跟踪侧栏是否打开，然后根据打开状态呈现正确的样式：

const Fleet = () => {
    const [isSidebarOpen, setIsSidebarOpen] = React.useState<boolean>(false);

    const closeSm = () => {
        setIsSidebarOpen(false);
    }

    const openSM = () => {
        setIsSidebarOpen(true);
    }

    return(
        <>
            <div id='mysideMenu' className='sidemenu' style={{ width: isSidebarOpen ? 250 : 0 }}>
               ...
            <div id='pg-content' style={{ marginLeft: isSidebarOpen ? 250 : 0 }}>

const Fleet=（）=>{
const[issidebarpen，setissidebarpen]=React.useState（false）；
const closeSm=（）=>{
Setissibarpen（假）；
}
常量openSM=（）=>{
Setissibarpen（真）；
}
返回(
...

如果您绝对希望直接操作DOM，请改用：

const Fleet=（）=>{
const myElement=React.useRef（null）；
const myContent=React.useRef（null）；
const closeSm=（）=>{
myElement.current.style.width='0'；
myContent.current.style.marginLeft='0'；
}
常量openSM=（）=>{
myElement.current.style.width='250px'；
myContent.current.style.marginLeft='250px'；
}
返回(
...

你说的“工作不太好”是什么意思你为什么要使用

any

？是的，我的意思是，如果我更改了像素并保存了，它就工作了，但是如果我重新加载页面不工作，反应崩溃并抛出一个错误

TypeError:myElement为null openSM C:/Users/troya/Desktop/inarix-portal1/src/components/Fleet.tsx:17 14|}15 | 16 | const openSM=（）=>{>17 | myElement.style.width='250px'；|^18 | myContent.style.marginLeft='250px'；19}20 |

无需显式定义此类型：

HTMLElement | any

但仅在typescript中，因为在jsx中工作得很好，我没有任何问题。主要区别在于，在第二个示例中，您在函数外部而不是在函数内部调用

document.getElementById

。如果

Fleet

是将这些组件呈现到屏幕上的组件，它们可能还不存在。这就是为什么

myElement

和

myContent

为

null

，并且您不能更改它们的样式。谢谢！Ref的解决方案很酷！另一个是useState的解决方案是的，我知道怎么做！但是我说的，我正在做一些练习来操纵它谢谢你！无论如何！太好了！非常感谢！

const Fleet = () => {
    const myElement = React.useRef<HTMLElement>(null);
    const myContent = React.useRef<HTMLElement>(null);

    const closeSm = () => {
        myElement.current.style.width = '0';
        myContent.current.style.marginLeft='0';
    }

    const openSM = () => {
        myElement.current.style.width = '250px';
        myContent.current.style.marginLeft='250px';
    }

    return(
        <>
            <div id='mysideMenu' className='sidemenu' ref={myElement}>
               ...
            <div id='pg-content' ref={myContent}>