当前位置：首页 > React

react如何调用组件

2026-01-23 21:53:21React

调用组件的基本方法

在React中调用组件分为直接引入和动态引入两种方式。通过import语句将组件文件引入到当前文件中，使用组件时以标签形式调用。

import Button from './Button';

function App() {
  return <Button />;
}

传递props给组件

组件可以通过props接收外部数据。在调用时以属性形式传递数据，组件内部通过props对象或解构方式获取。

react如何调用组件

<Greeting name="Alice" />
// 组件内部
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

使用children属性

组件标签之间的内容会作为children prop传递。这种方式适合需要嵌套内容的场景。

<Card>This is card content</Card>
// 组件内部
function Card({ children }) {
  return <div className="card">{children}</div>;
}

动态加载组件

通过React.lazy和Suspense实现按需加载，优化性能。适用于路由分割或大型应用。

react如何调用组件

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

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

高阶组件模式

高阶组件（HOC）是一种复用组件逻辑的模式。通过函数包裹现有组件，返回增强后的新组件。

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}
const EnhancedComponent = withLogging(MyComponent);

渲染属性模式

通过组件prop接收渲染函数，实现逻辑与UI的解耦。适用于共享状态或行为的情况。

<DataProvider render={data => <Child data={data} />} />
// 组件内部
function DataProvider({ render }) {
  const [data, setData] = useState(null);
  return render(data);
}