当前位置：首页 > React

react如何重用组件

2026-02-11 22:29:28React

重用组件的核心方法

通过Props传递数据
父组件通过props向子组件传递数据或配置，子组件根据props渲染不同内容。例如：

function Button({ text, color }) {
  return <button style={{ backgroundColor: color }}>{text}</button>;
}
// 重用示例
<Button text="提交" color="blue" />
<Button text="取消" color="red" />

使用children属性
通过props.children实现组件嵌套，适合布局类组件。例如：

function Card({ children }) {
  return <div className="card">{children}</div>;
}
// 重用示例
<Card><h3>标题</h3></Card>
<Card><p>内容段落</p></Card>

高阶组件（HOC）模式

包装组件增强功能
通过函数接收组件并返回新组件，实现逻辑复用。例如实现加载状态：

function withLoading(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    return isLoading ? <Spinner /> : <Component {...props} />;
  };
}
const EnhancedButton = withLoading(Button);

自定义Hook复用逻辑

提取状态逻辑
将组件中的状态逻辑提取为可复用的Hook。例如表单处理：

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };
  return [values, handleChange];
}
// 组件内使用
const [formData, handleChange] = useForm({ username: '', password: '' });

组件组合模式

通过组件嵌套实现
将多个小组件组合成复杂组件，例如构建可复用的表单字段：

function FormField({ label, type }) {
  return (
    <div>
      <label>{label}</label>
      <input type={type} />
    </div>
  );
}
// 组合使用
<FormField label="用户名" type="text" />
<FormField label="密码" type="password" />

Context API共享状态

跨层级组件复用
通过Context提供全局数据，避免多层props传递。例如主题配置：

const ThemeContext = createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
// 子组件消费
function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}