Skip to content

i18n(zh-cn): Update imports.mdx #9036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
liruifengv merged 3 commits into from
Aug 8, 2024
Merged

i18n(zh-cn): Update imports.mdx #9036

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6189ad5
i18n(zh-cn): Update `imports.mdx`
Nin3lee Aug 8, 2024
69c22bf
line wrap
Nin3lee Aug 8, 2024
ee23fa4
fix broken link
Nin3lee Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 8 additions & 16 deletions src/content/docs/zh-cn/guides/imports.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ Astro 无需配置即支持大多数静态资源。你可以在项目的任何
- Astro 组件 (`.astro`)
- Markdown (`.md`，`.markdown`，等等)
- JavaScript (`.js`，`.mjs`)
- TypeScript (`.ts`，`.tsx`)
- TypeScript (`.ts`)
- NPM 包
- JSON (`.json`)
- JSX (`.jsx`，`.tsx`)
- CSS (`.css`)
- CSS 模块 (`.module.css`)
- 图片和资源 (`.svg`，`.jpg`，`.png`，等等。)
Expand All @@ -41,6 +40,13 @@ import { getUser } from './user.js';

可以使用普通的 ESM `import` 和 `export` 语法来导入 JavaScript。它在 Node.js 和浏览器中和预期保持一致。

:::note[导入 JSX 文件]

渲染 JSX/TSX 文件需要适当的 [UI 框架](/zh-cn/guides/framework-components/)（[React](/zh-cn/guides/integrations-guide/react/)、[Preact](/zh-cn/guides/integrations-guide/preact/) 或 [Solid](/zh-cn/guides/integrations-guide/solid-js/)）。
在适当的情况下使用 `.jsx`/`.tsx` 扩展名，因为 Astro 不支持 `.js`/`.ts` 文件中的 JSX。

:::

### TypeScript

```js
Expand All @@ -64,20 +70,6 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx

<ReadMore>了解更多关于 [Astro 中的 TypeScript 支持](/zh-cn/guides/typescript/) 的内容。</ReadMore>

### JSX / TSX

```js
import { MyComponent } from './MyComponent.jsx';
```

Astro 内置对 JSX（`*.jsx`和`*.tsx`）文件的支持。JSX 语法会自动转译为 JavaScript。

虽然 Astro 能理解 JSX 语法，但你需要使用框架集成来正确渲染 React、Preact 和 Solid 等框架。请查看我们的[使用集成](/zh-cn/guides/integrations-guide/)指南以了解更多。

:::note
**Astro 不支持 `.js`/`.ts` 文件中的 JSX 语法。**只有以`.jsx` 和 `.tsx` 文件扩展名结尾的文件中的 JSX 才会被处理。
:::

### NPM 包

如果你安装了一个 NPM 包，你可以在 Astro 中导入它。
Expand Down