Javascript 无法在react中设置状态

我试图在鼠标进入时添加类，在鼠标离开时从中删除类。对于我使用的状态，我在组件类中声明了状态，但我不能在组件中设置

我的代码

class MegaMenu extends React.Component {
  public state = { addClass: false }
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (props: IMenuListProps) => {
  const { width, height } = WidthAndHeight();
  const handleOnMouseEnter = () => {
    if (width > 943) {
      console.log('Mouse Enter')
    }
  }
  const handleOnMouseOut = () => {
    if (width > 943) {
      console.log('Mouse Out')
    }
  }

  return (
    <ul onMouseEnter={handleOnMouseEnter}>
      {
        props.Options.map((Option: IMenu, index: number) => (
          <li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]} onMouseEnter={handleOnMouseEnter} onMouseOut={handleOnMouseOut}>
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}



export default MegaMenu

class MegaMenu扩展了React.Component{
公共状态={addClass:false}
公共渲染（）{
返回(
)
}
}
const MenuList=（props:IMenuListProps）=>{
常量{width，height}=widthandheath（）；
常量handleOnMouseEnter=（）=>{
如果（宽度>943）{
console.log（'鼠标输入'）
}
}
常数handleOnMouseOut=（）=>{
如果（宽度>943）{
console.log（'Mouse Out'）
}
}
返回(

{
props.Options.map（（选项：IMenu，索引：number）=>(
0）？样式[“菜单下拉图标”]：样式[“普通子”]}onMouseEnter={handleOnMouseEnter}onMouseOut={handleOnMouseOut}>
{/*基本情况*/}
{
（Option.subitem&&Option.subitem.length>0）&&
}

))
}

)
}
导出默认MegaMenu

我做错了什么

在菜单列表组件中定义状态

使用setState（）设置处理程序中的值

使用render方法中的值来设置类

您的代码已修改（我不确定您要在何处添加/删除类）：

class MegaMenu扩展了React.Component{
公共状态={addClass:false}
公共渲染（）{
返回(
)
}
}
const MenuList=（props:IMenuListProps）=>{
私有状态={className:''}；
常量{width，height}=widthandheath（）；
常量handleOnMouseEnter=（）=>{
如果（宽度>943）{
setState（{className:'some class'}）；
}
}
常数handleOnMouseOut=（）=>{
如果（宽度>943）{
setState（{className:''}）；
}
}
返回(
className={{{this.state.className}
{
props.Options.map（（选项：IMenu，索引：number）=>(
0）？样式[“菜单下拉图标”]：样式[“普通子”]}onMouseEnter={handleOnMouseEnter}onMouseOut={handleOnMouseOut}>
{/*基本情况*/}
{
（Option.subitem&&Option.subitem.length>0）&&
}

))
}

)
}
导出默认MegaMenu

我对它真的很陌生。请您根据我的问题帮助我，好吗？没有，这行有错误。这不起作用。对不起，应该是

这个.state.className

。我修复了代码。我找不到更改的位置，无法通过

this

so

className={{this.state.className}}

在模板中访问

状态。
class MegaMenu extends React.Component {
  public state = { addClass: false }
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (props: IMenuListProps) => {
  private state = { className: '' };

  const { width, height } = WidthAndHeight();
  const handleOnMouseEnter = () => {
    if (width > 943) {
      setState({ className: 'some-class' });
    }
  }
  const handleOnMouseOut = () => {
    if (width > 943) {
      setState({ className: '' });
    }
  }

  return (
    <ul onMouseEnter={handleOnMouseEnter}> className={{this.state.className}}
      {
        props.Options.map((Option: IMenu, index: number) => (
          <li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]} onMouseEnter={handleOnMouseEnter} onMouseOut={handleOnMouseOut}>
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}



export default MegaMenu