Javascript I'；我正在制作一个组件，当鼠标悬停在上面时，该组件将显示为放大。你如何安排国有资产？

我觉得问题很简单。简言之

我试着做出反应

创建react应用程序

制作完组件后，我将（“侧层”）组件放在项目之前，并将其向右浮动

import React from 'react';
import Header from './header'
import FooterPage from './footer';
import Projects from './ProjectsContainer';
import SideLayer from './SideLayer'
import '../styles/App.css';

function App() {
  return (
    <div classname="App">
      <Header />
      <SideLayer />
      <Projects />
      <FooterPage />
    </div>
  );
}
export default App;

从“React”导入React；
从“./头”导入头
从“./footer”导入页脚页；
从“/ProjectsContainer”导入项目；
从“./SideLayer”导入SideLayer
导入“../styles/App.css”；
函数App（）{
返回(
);
}
导出默认应用程序；

在我的SideLayer类组件中，目前我声明了state的属性，返回了我导入的rightside函数

import React from 'react';
import '../styles/aside.css';
import RightAside from './rightAside';


class SideLayer extends React.Component{
  constructor(props){
    super(props);

    this.state ={
      mouseOver: false,
      isHoveredOver: this.props.mouseOver,
      isZoomed: this.props.isHoveredOver,
      id: 'asideDiv',
      height: '100px',
      width: '100px'
    }



  }

  render(props){
    return(
      <RightAside data={props} />
    )
  }
}

从“React”导入React；
导入“../styles/aside.css”；
从“./RightSided”导入RightSided；
类侧层扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
老鼠：错，
伊什霍弗：这个。道具。鼠标盖，
isZoomed:this.props.Ishoveredver，
id:“asideDiv”，
高度：“100px”，
宽度：“100px”
}
}
渲染（道具）{
返回(
)
}
}

我有一个变量向后携带道具，如果是这样的话

这就是我的问题所在：

import React from 'react';


const asideDiv = document.getElementById('aside');


function onMouseHover(props){
  this.setState({
      height: this.props.height,
      width: this.props.width
    })
  console.log(this.state.height);
    return asideDiv.style = {
      height: this.state.height,
      width: this.state.width
    };
}



function RightAside(props){
  return(
    <div id="aside" onMouseOver={onMouseHover}>
    <aside>
        <h1>hello</h1>
        <section>
          <article>
            <p>
              One day some crazy shit happen and then
              boom, the world was crazier.
            </p>
          </article>
        </section>
      </aside>
    </div>
  );
}



export default RightAside;

从“React”导入React；
const asideDiv=document.getElementById（'aside'）；
鼠标悬停功能（道具）{
这是我的国家({
高度：这个。道具。高度，
宽度：this.props.width
})
console.log（this.state.height）；
return asideDiv.style={
高度：this.state.height，
宽度：this.state.width
};
}
功能右侧（道具）{
返回(
你好

有一天，一些疯狂的事情发生了，然后
繁荣，世界变得更加疯狂。

);
}
出口违约金；

我真的不知道该怎么做

---

正确的方法是什么？

为什么不在css中使用

：hover

？这只是为了练习，最后使用css

：hover

方法

import React from 'react';


const asideDiv = document.getElementById('aside');


function onMouseHover(props){
  this.setState({
      height: this.props.height,
      width: this.props.width
    })
  console.log(this.state.height);
    return asideDiv.style = {
      height: this.state.height,
      width: this.state.width
    };
}



function RightAside(props){
  return(
    <div id="aside" onMouseOver={onMouseHover}>
    <aside>
        <h1>hello</h1>
        <section>
          <article>
            <p>
              One day some crazy shit happen and then
              boom, the world was crazier.
            </p>
          </article>
        </section>
      </aside>
    </div>
  );
}



export default RightAside;