当前位置：首页 > React

react如何传入组件

2026-02-26 07:07:05React

传递组件的方式

在React中，可以通过props将组件作为参数传递给其他组件。这种方式常用于实现高阶组件或动态渲染子组件。

function ParentComponent() {
  return <ChildComponent child={<GrandChildComponent />} />;
}

function ChildComponent({ child }) {
  return <div>{child}</div>;
}

function GrandChildComponent() {
  return <span>GrandChild Content</span>;
}

使用children属性

React的children prop专门用于传递子组件，这是更符合React设计模式的做法。

react如何传入组件

function ParentComponent() {
  return (
    <ChildComponent>
      <GrandChildComponent />
    </ChildComponent>
  );
}

function ChildComponent({ children }) {
  return <div>{children}</div>;
}

通过context传递组件

对于需要跨多级组件传递的情况，可以使用React Context API。

react如何传入组件

const ComponentContext = React.createContext();

function App() {
  return (
    <ComponentContext.Provider value={<GrandChildComponent />}>
      <ParentComponent />
    </ComponentContext.Provider>
  );
}

function ParentComponent() {
  return <ChildComponent />;
}

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

作为函数参数传递

可以将组件作为函数参数传递给其他组件，这种方式在渲染属性(Render Props)模式中常见。

function ParentComponent() {
  return (
    <ChildComponent renderComponent={() => <GrandChildComponent />} />
  );
}

function ChildComponent({ renderComponent }) {
  return <div>{renderComponent()}</div>;
}