组件

可以使用 Qwik 组件创建页面内容。表示内容的组件应导出为default导出。

假设您的路由设置如下：

src/
└── routes/
    └── some/
        └── path/
            └── index.tsx              # https://example.com/some/path

// File: src/routes/some/path/index.tsx
import { component$ } from '@builder.io/qwik';

// Notice the default export
export default component$(() => {
  return <h1>Hello World!</h1>;
});

导入其他组件

您可以通过在彼此内部组合多个组件来构建复杂的视图。为此，将其他组件导入您的 index.tsx 文件

src/
├── components/
│   └── heading.tsx
└── routes/
    └── some/
        └── path/
            ├── index.tsx              # https://example.com/some/path
            └── sub_component.tsx

在 index.tsx 中，您可以创建一个导出为 default 导出的组件。 通过使用 JSX-语法 编写模板来创建内容。 每个组件函数都返回应该在屏幕上渲染的模板。 如果您想了解有关组件的更多信息，请参阅 组件文档。

以下组件将根据我们在上面设置的目录结构在 https://example.com/some/path 处渲染。

// File: src/routes/some/path/index.tsx
import { component$ } from '@builder.io/qwik';
import Heading from '../../../components/heading';
import SubComponent from './sub_component';

export default component$(() => {
  return (
    <>
      <Heading />
      <h2>Hello World!</h2>
      <SubComponent />
    </>
  );
});

// File: src/components/heading.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>Site Heading</h1>;
});

// File: src/routes/some/path/sub_component.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <div>Other component content.</div>;
});