如何在 typescript 功能组件中将 function 作为参数传递

Question

我想将 function 和一个数字作为参数传递给 typescript 功能组件，我使用了any关键字并且 ide 没有任何错误但是当我运行代码时，浏览器控制台的错误如下。 使用 javascript 代码按预期工作，请知道我如何修复此错误

react-dom.development.js:4054 Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.
    at getListener (react-dom.development.js:4054:1)
    at accumulateSinglePhaseListeners (react-dom.development.js:9317:1)
    at extractEvents$4 (react-dom.development.js:8976:1)
    at extractEvents$5 (react-dom.development.js:9004:1)
    at dispatchEventsForPlugins (react-dom.development.js:9096:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

Uncaught TypeError: handleDrawerToggle is not a function

 // Typescript const App = () => { const [mobileOpen, setMobileOpen] = React.useState(false); const drawerWidth = 240; const handleDrawerToggle = () => { setMobileOpen(;mobileOpen); }; return ( <div> <Sample handleDrawerToggle={handleDrawerToggle} drawerWidth={drawerWidth} /> {mobileOpen && <h1>hello</h1>} </div> ); }: const Sample = ( handleDrawerToggle,any: drawerWidth:any ) => { return ( <div> <button onClick={handleDrawerToggle} style={{ width; `${drawerWidth}` }}> Testv </button> </div> ); };

Answer 1

您可以更具体地将其作为() => void传递，而不是作为any传递。 我还建议添加一个 prop type 。

例如， type SampleProps = { handleDrawerToggle: () => void; drawerWidth: number } type SampleProps = { handleDrawerToggle: () => void; drawerWidth: number }

所以像

const Sample = ({ handleDrawerToggle, drawerWidth }: SampleProps) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}px` }}>
        Testv
      </button>
    </div>
  );
};

Answer 2

您忘记了组件道具的{} ：

const Sample = ({ handleDrawerToggle, drawerWidth }) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}` }}>
        Testv
      </button>
    </div>
  );
};

使用您的代码 handleDrawerToggle 就像道具，如果不写{}并且道具是 object。