当前位置：首页 > React

react如何重用组件

2026-03-31 01:33:26React

React 重用组件的常用方法

通过 props 传递数据和配置 将组件设计为可配置的，通过 props 接收不同参数。例如创建一个可复用的按钮组件，通过 props 控制其样式、文本和点击行为。

function Button({ color, text, onClick }) {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {text}
    </button>
  );
}

// 使用
<Button color="blue" text="Submit" onClick={handleSubmit} />

使用 children 属性组合组件 通过 children 实现内容注入，允许组件包裹任意子元素。这种方式适合构建布局组件或容器组件。

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// 使用
<Card>
  <h2>Title</h2>
  <p>Content</p>
</Card>

高阶组件（HOC）模式 通过函数接收组件并返回增强后的新组件。适合跨组件共享逻辑，如认证、日志等横切关注点。

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

自定义 Hook 共享状态逻辑 将组件中的状态逻辑提取为可重用的 Hook。适合非视觉逻辑的复用，如表单处理、数据获取等。

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

// 在多个组件中使用
function ComponentA() {
  const { count, increment } = useCounter(0);
  // ...
}

组件组合设计 通过多个小组件组合成复杂组件。将功能拆分为更小的单元，通过组合方式复用。

function Form() {
  return (
    <form>
      <Input label="Username" />
      <Input label="Password" type="password" />
      <Button>Submit</Button>
    </form>
  );
}

Context API 共享全局数据 通过 Context 提供全局可访问的数据，避免多层 props 传递。适合主题、用户信息等全局状态。

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  // ...
}

渲染属性（Render Props） 通过函数 prop 动态决定渲染内容，实现行为与渲染分离。适合需要高度自定义渲染的场景。

react如何重用组件

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // ...
  return render(position);
}

// 使用
<MouseTracker render={({ x, y }) => (
  <p>Mouse position: {x}, {y}</p>
)} />