组件组合

组件组合是构建复杂 UI 的基础。openInula 2支持多种组合模式，包括容器组件、复合组件、插槽（children）、高阶组件等。

容器组件与展示组件

将逻辑与展示分离，提升复用性。

// 展示组件
function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

// 容器组件
function UserList({ users }) {
  return (
    <div>
      <for each={users}>
        {(user) => <UserCard user={user} />}
      </for>
    </div>
  );
}

插槽（children）

通过 children 实现灵活的内容插入。

function Panel({ title, children }) {
  return (
    <div className="panel">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <Panel title="欢迎">
      <p>这是插槽内容</p>
      <button>确定</button>
    </Panel>
  );
}

复合组件模式

将多个子组件组合为一个整体。

function Tabs({ children }) {
  // 省略 tab 切换逻辑
  return <div className="tabs">{children}</div>;
}

function Tab({ label, children }) {
  return (
    <div className="tab">
      <h4>{label}</h4>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <Tabs>
      <Tab label="A">内容A</Tab>
      <Tab label="B">内容B</Tab>
    </Tabs>
  );
}

高阶组件（HOC）

高阶组件用于复用逻辑或增强组件功能。

function withLogger(Component) {
  return function Wrapper(props) {
    console.log('props:', props);
    return <Component {...props} />;
  };
}

const LoggedPanel = withLogger(Panel);

最佳实践

• 组件应职责单一，便于组合和复用
• 善用 children 和 props 传递内容和行为
• 复合组件可提升灵活性

注意事项

• 避免过度嵌套，保持结构清晰
• 插槽内容建议通过 children 传递

相关链接

• Props 传递
• 上下文