React中组件以{Component}形式传入时，如何传递与接收Props？

一、核心逻辑说明 #

当你把NavItemsLayout作为NavLayoutComponent属性传给AppLayout时，本质是传递组件的引用，而非直接渲染组件。必须在AppLayout内部将这个接收的组件实例化（即写成<NavLayoutComponent />形式），才能传递并接收props。

二、分步实现方案 #

1. 在AppLayout中接收组件并传递Props #

首先定义AppLayout组件，它接收NavLayoutComponent属性，然后将其渲染并传入需要的props：

const AppLayout = ({ NavLayoutComponent }) => {
  // 准备要传给子组件的props数据
  const navProps = {
    userName: "张三",
    isLoggedIn: true
  };

  return (
    <div className="app-layout">
      {/* 将传入的组件渲染，并用展开运算符传递props */}
      <NavLayoutComponent {...navProps} />
    </div>
  );
};

2. 在NavItemsLayout中接收并使用Props #

NavItemsLayout接收props的方式和普通组件完全一致，直接通过参数获取即可：

const NavItemsLayout = (props) => {
  // 解构props让代码更简洁
  const { userName, isLoggedIn } = props;
  
  return (
    <div className="nav-items">
      Hello {userName}!
      {isLoggedIn && <span>已登录</span>}
    </div>
  );
};

三、组件以{Component}形式传递的关键规则 #

• 传递方：直接传递组件的引用（比如NavItemsLayout），不需要加<>，这相当于传递组件的“蓝图”。
• 接收方：必须把这个属性当作组件渲染（加上<>），此时通过<Component {...props} />的形式传递props，相当于把“蓝图”实例化。

完整可运行代码 #

const NavItemsLayout = (props) => {
  const { userName, isLoggedIn } = props;
  
  return (
    <div className="nav-items">
      Hello {userName}!
      {isLoggedIn && <span>已登录</span>}
    </div>
  );
};

const AppLayout = ({ NavLayoutComponent }) => {
  const navProps = {
    userName: "张三",
    isLoggedIn: true
  };

  return (
    <div className="app-layout">
      <NavLayoutComponent {...navProps} />
    </div>
  );
};

const Navbar = () => {
  return (
    <div className="navbar">
      <AppLayout NavLayoutComponent={NavItemsLayout} />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Muhammad Umar