当前位置：首页 > React

react如何传入组件

2026-01-23 17:05:50React

在React中传入组件的方法

使用props传递组件
通过props可以将组件作为属性传递给子组件。父组件中直接将要传递的组件放在子组件的属性中，子组件通过props接收并使用。

// 父组件
const ParentComponent = () => {
  return <ChildComponent content={<CustomComponent />} />;
};

// 子组件
const ChildComponent = (props) => {
  return <div>{props.content}</div>;
};

通过children传递组件
利用React的children特性，可以将组件嵌套在子组件的标签内部传递。子组件通过props.children访问传入的组件。

// 父组件
const ParentComponent = () => {
  return (
    <ChildComponent>
      <CustomComponent />
    </ChildComponent>
  );
};

// 子组件
const ChildComponent = (props) => {
  return <div>{props.children}</div>;
};

使用高阶组件（HOC）
高阶组件是一种函数，接收一个组件并返回新的组件。通过这种方式可以在组件间复用逻辑或传递额外的props。

const withCustomComponent = (WrappedComponent) => {
  return (props) => (
    <div>
      <WrappedComponent {...props} />
      <CustomComponent />
    </div>
  );
};

const EnhancedComponent = withCustomComponent(OriginalComponent);

通过Context传递组件
Context提供了一种跨组件层级传递数据的方法，包括组件。创建Context后，Provider包裹父组件，子组件通过Consumer或useContext钩子获取传递的组件。

const ComponentContext = React.createContext();

// 父组件
const ParentComponent = () => {
  return (
    <ComponentContext.Provider value={<CustomComponent />}>
      <ChildComponent />
    </ComponentContext.Provider>
  );
};

// 子组件
const ChildComponent = () => {
  const component = React.useContext(ComponentContext);
  return <div>{component}</div>;
};

使用Render Props模式
Render Props是一种通过函数prop共享代码的技术。父组件传递一个返回组件的函数给子组件，子组件调用该函数渲染内容。

// 父组件
const ParentComponent = () => {
  return <ChildComponent render={() => <CustomComponent />} />;
};

// 子组件
const ChildComponent = (props) => {
  return <div>{props.render()}</div>;
};

动态导入组件（Lazy Loading）
React.lazy和Suspense可以实现组件的动态导入。适用于按需加载场景，提升应用性能。

react如何传入组件

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

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