当前位置：首页 > React

react如何使用别的组件

2026-01-24 15:51:41React

使用组件的基础方法

在React中，使用其他组件通常通过导入和渲染实现。假设有一个名为Button的组件，文件路径为./components/Button。

// 导入组件
import Button from './components/Button';

// 在父组件中渲染
function App() {
  return (
    <div>
      <Button label="Click Me" />
    </div>
  );
}

传递Props

通过Props向子组件传递数据或配置。子组件通过props接收参数。

// Button组件定义
function Button({ label }) {
  return <button>{label}</button>;
}

// 父组件传递Props
<Button label="Submit" color="blue" />

组件组合

通过children属性实现嵌套结构，适合布局类组件。

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

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

动态加载组件

使用React.lazy和Suspense实现按需加载，优化性能。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

高阶组件（HOC）

通过函数包装组件，复用逻辑。例如实现权限控制：

function withAuth(WrappedComponent) {
  return function (props) {
    const isAuthenticated = checkAuth(); // 假设有验证逻辑
    return isAuthenticated ? <WrappedComponent {...props} /> : <div>Please login</div>;
  };
}

// 使用HOC
const AuthButton = withAuth(Button);
<AuthButton label="Secure Action" />

上下文共享

通过React.createContext跨层级传递数据，避免Props层层传递。

const ThemeContext = React.createContext('light');

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

// 消费者
function Toolbar() {
  return (
    <ThemeContext.Consumer>
      {theme => <Button theme={theme} />}
    </ThemeContext.Consumer>
  );
}