如何在 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。