React中的JavaScript修改DOM [英] JavaScript in React to modify the DOM

问题描述

我有一个带有 div.modal 的组件，我想用CSS 过渡.初始值设置为 w = 0 和 h = 0 ，过渡为1s .

此组件是有条件渲染，带有另一个名为-< Starter/> 的组件，而该组件又是< Home/> 的组件./p>

我已经在很多地方尝试过了，但是DOM还没有准备好

  {document.getElementsByClassName('modal').style.width ='auto'} 

组件:

  const JoinSign =()=>{返回 (< div id ="overlay">< div className =模态">< h2>加入登录</h2></div></div>);}导出默认的JoinSign; 

解决方案

对我来说，最简单的方法是将一个类添加到模式并执行useEffect:

  const JoinSign =()=>{const [additionalClass，setAdditionalClass] = useState('')useEffect(()=> {setTimeout(()=> {//不确定是否需要，但是setAdditionalClass('open')}，1);return()=>setAdditionalClass('')//清理函数}，[])返回 (< div id ="overlay">< div className = {`modal $ {additionalClass}`}>< h2>加入登录</h2></div></div>);}导出默认的JoinSign 

然后您只需在.modal.open

上使用纯CSS处理动画即可

I have a component with a div.modal that I would like to transition with CSS. The initial values are set for w=0 and h=0, transition is all, 1s.

This component is a conditional render wihin another component named - <Starter />, which in turn is a component of <Home />.

I have tried this in a number of places however the DOM is not ready

{ document.getElementsByClassName('modal').style.width = 'auto' }

The component:

const JoinSign = () => { 
    
    return (
        <div id="overlay">
            <div className="modal">
            <h2>Join Sign in</h2>
            </div>
        </div>
    );
}
 
export default JoinSign;

解决方案

The simplest approach for me is just to add a class to modal and do a useEffect:

const JoinSign = () => { 

   const [additionalClass, setAdditionalClass] = useState('')

    useEffect(() => {
      setTimeout(() => { //not sure it is required but 
        setAdditionalClass('open')
      }, 1);
      return () => setAdditionalClass('') //clean up function
    }, [])    

    return (
        <div id="overlay">
            <div className={`modal ${additionalClass}`}>
            <h2>Join Sign in</h2>
            </div>
        </div>
    );
}
 
export default JoinSign

And you handle the animation with just plain css on .modal.open

这篇关于React中的JavaScript修改DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！