标签: astrojs

我正在尝试启动 astro。当我不选择框架时，尽管我已经安装了 git 并且完全正常工作，但我还是收到了这个错误。任何帮助将不胜感激。

\xe2\x88\x9a Which frameworks would you like to use? \xc2\xbb\n> Copying project files...\ncould not find commit hash for latest\nThis seems to be an issue with degit. Please check if you have 'git' installed on your system, and install it if you don't have (https://git-scm.com).  \nIf you do have 'git' installed, please file a new issue here: https://github.com/withastro/astro/issues\n

我正在学习Astro。我考虑在 Astro 组件中使用 MUI 的材质组件，例如 Button、Typography 等，因为我已经启用了 React 集成。

astro.config.js

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

// https://astro.build/config
export default defineConfig({
    // Enable React to support React JSX components.
    integrations: [react()],
});

Counter.tsx：

import { useState } from "react";
import Container from "@mui/material/Container";
import "./Counter.css";
import { Button, Typography } from "@mui/material";

export default function Counter({
  children,
  count: initialCount
}: {
  children: JSX.Element;
  count: number;
}) {
  const [count, setCount] = useState(initialCount);
  const add = …

我正在尝试使用 Astro + Reactjs 构建一个 Web 应用程序，但在调用 useEffect 时遇到问题。基本上 useEffect 没有调用，我在终端中没有收到任何日志，也没有在终端或浏览器中收到任何警告/错误。

我将函数导出为：export default function SecondSection(){}，我将文件扩展名从 更改.jsx为.tsx，仍然没有结果。我遵循 astro 文档的所有说明来集成 React。

我正在尝试使用反应钩子，例如 useEffect/useState，但由于某些原因它不起作用。

什么可能导致该问题？感谢您的时间。

我相信我在代码中采用了错误的方法，如何在按钮单击中设置客户端首选项，该按钮单击用作全局 astro 组件中的道具？或者我应该怎么做？我知道这是可能的，因为 astro js 本身在他们的文档网站中这样做了！（下面是我的尝试的解释）

我目前正在开发一个 Astro Js 项目，这是我的个人作品集，我希望它向访问者展示一个选择首选语言的选项，所以最初我在所有 astro 组件中传递了一个语言属性。因此，我尝试在索引或布局文件中创建一个按钮，我的所有组件都会在其中接收其道具，以更改此值，但我很快意识到这不是应该如何完成的：

index.astro：（错误）

---
let lang = "pt-br";
---
<div id="langBtn">
  <span id="brbtn">BR</span><span>|</span><span id="enbtn">EN</span>
</div>
<Layout title="Daniel Folio" lang={lang}>
  <Hero lang={lang} />
</Layout>

<script>
  function handleClick() {
    if(lang === "pt-br") {
       lang = "en";
    } else {
       lang = "pt-br";
    }
  }
  document
    ?.getElementById("langBtn")
    ?.addEventListener("click", handleClick);
</ script>

我意识到我们无法在客户端访问或更改服务器端变量。因此，我尝试使用 Astro cookie 来检查语言 cookie 是否存在，否则创建一个，然后单击按钮时更改其值，但这也是不可能的，因为 Astro.cookies 在客户端不可用。

我如何在 astro JS 组件中添加条件。例如，如果只有“DOG”，我如何显示一个项目？

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

https://docs.astro.build/en/core-concepts/astro-components/#dynamic-html

我正在尝试做什么

当使用 .compiledContent （甚至使用 .rawContnent）将 markdown 文件作为字符串传递到另一个组件时，有一种简单的方法来呈现它的内容吗？或者甚至比这更好的方法，显然在 Astro 中我们通常可以使用<Content /> Component，但据我所知，如果不在父组件中使用 <slot /> ，我无法将组件或此功能传递给另一个组件成分。

我有一些用于父组件的 JS，并且使用 <slot/> 而不是将 props 传递给组件会改变事情，所以希望寻找使用它的解决方案。

我的设置

• 数据存储在/src/data/experienceMarkdown 文件中，其中包含年份和每个文件内容部分中格式化为 Markdown 的说明
• 一个名为的组件Tabs.astro，它采用标题和内容的属性，它们都是字符串列表
• /src/pages/experience.astro包含显示此数据的选项卡组件的页面

我使用下面的代码从 Markdown 文件中获取数据，并将年份和描述传递给选项卡组件。

experience.astro

---
import Tabs from "../components/Tabs.astro";

const jobs = await Astro.glob("../data/experience/*.md");
const years = jobs.map((job) => job.frontmatter.year);
const descriptions = jobs.map((job) => job.compiledContent);
---
<!-- My component taking the data to be rendered -->
<Tabs headings={years} contents={descriptions} />

Tabs.astro

该组件像这样呈现信息

<!-- Tabs --> …

我无法访问 astro 文件的查询参数。

给定网址http://localhost:3000/example?hello=meow：

如何{hello: "meow"}从example.astro文件内访问？

我以前可以运行我的网站，但现在不行了。我尝试从我的分支历史记录中下载旧代码，但它仍然无法正常工作。不确定我做了什么。我尝试寻找解决方法，但找不到任何东西。有人有什么想法吗？

我想在我的 Astro 应用程序中使用我用 Rust 编写的 Web-Assembly 模块。我正在使用 TypeScript 和以下内容astro.config.mjs：

import { defineConfig } from "astro/config";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [wasm(), tailwind(), react()],
  vite: {
    plugins: [wasm(), topLevelAwait()],
  },
});

在文件中使用 wasm 的代码functions.ts如下所示：

import { greet } from "dices";

export function hello(): void {
  let g: string = greet();
  console.log(g);
}

类型检查一切正常，但是在运行时npm run dev遇到以下错误：

error   WebAssembly.instantiate(): BufferSource argument is …

我正在使用 Astro 和 TypeScript 创建一个可重用的 UI 组件。该组件只是<a>HTML 标记的包装器。问题是我必须自己定义Props带有元素的所有常规 HTML 属性的接口<a>（href、target、title等）

有没有办法通过扩展某个接口来避免 Astro 中的这种情况？

---
export interface Props {} // I don't want to define `href`, `target`, etc. by myself here

const props = Astro.props;
---

<a {...props}>
  <slot />
</a>

作为参考，这是在 React 中使用以下类型完成的 React.HTMLAttributes<HTMLAnchorElement>