19、React Hooks：构建强大 Web 应用的关键

React Hooks：构建强大 Web 应用的关键

1. 带图标按钮组件示例

在 React 开发中，我们可以创建一个带图标的按钮组件。以下是示例代码：

import { useState } from 'react'; 
function Icon({ type }) { 
  return <img src={`/images/${type}.png`} alt="" />; 
} 
function Button({ label, Icon }) {    // A 
  const [pressed, setPressed] = useState(false); 
  return ( 
    <button onClick={() => setPressed(p => !p)}> 
      <Icon pressed={pressed} />    // B 
      {label} 
    </button> 
  ); 
} 
function LockIcon({ pressed }) {    // C 
  return pressed ? <Icon type="lock" /> : <Icon type="unlock" />; 
} 
function LockButton() { 
  return <Button label="Lock" Icon={LockIcon} />;    // D 
} 

上述代码中：
- A 处