提问者:小点点

我不知道“渲染”有什么问题[重复]


我有这个错误消息:找不到名称“渲染”。ts(2304)然后我做了谷歌搜索,但找不到任何关于渲染的东西。我不知道“渲染”有什么问题。

import React from "react";
import HoverButtons from "./HoverButtons";

const evStop = (ev:any) => {
  ev.preventDefault(); 
  ev.stopPropagation(); 
  ev.nativeEvent.stopImmediatePropagation(); 
};

function HoverMenus () {
  const state = { hiddenPopupMenu: true };
  const toggle = () => {
    this.setState({ hiddenPopupMenu: !this.state.hiddenPopupMenu });
  };
  const clkBtn = (ev:any, msg:any) => {
    evStop(ev);
    this.props.flashFn(msg);
  };

  // ***error message : Cannot find name 'render'.ts(2304)***
  render() {
    const p = {
      funcs: {
        interested: (e:any) => this.clkBtn(e, "interested"),
      }
    };
    return (
      <div className="whenhovered" onClick={this.toggle}>
        {this.state.hiddenPopupMenu && (
          <div>
            <div className="mt-5 pt-5" />
            <div className="mt-5" />            
            <HoverButtons
              txt="LIKE"
              icon="thumbs-up"
              clicked={p.funcs.interested}
            />
          </div>
        )}
      </div>
    );
  }
}

export default HoverMenus;


共2个答案

匿名用户

您混合在类组件和函数组件之间,要使用类组件将您的函数转换为类并添加将React. Component扩展到您的类:

class HoverMenus extends React.Component {
}

要使用函数组件,您需要将语法排序更改为https://reactjs.org/docs/components-and-props.html

匿名用户

“渲染”是一个类组件方法。它不适用于函数式组件。

试试这个:

import {useState} from 'react'

function HoverMenus (props) {
  const [hiddenPopupMenu, setHiddenPopupMenu] = useState(true)

  const toggle = () => {
    setHiddenPopupMenu(!hiddenPopupMenu);
  };
  
  const clkBtn = (ev:any, msg:any) => {
    ev.stopPropagation();
    props.flashFn(msg);
  };

  const p = (e:any) => clkBtn(e, "interested");
  
  return (
    <div className="whenhovered" onClick={toggle}>
      {hiddenPopupMenu && (
        <div>
          <div className="mt-5 pt-5" />
          <div className="mt-5" />
          <HoverButtons
            txt="LIKE"
            icon="thumbs-up"
            clicked={p}
          />
        </div>
      )}
    </div>
  );
}

export default HoverMenus;