星座水合策略 `client:only=”react”` 在 React JS 中无法正常工作。

huangapple
go评论93阅读模式
英文:

astro hydration strategy `client:only="react"` not working with react js

问题

  1. // quote.tsx
  3. import React, { useEffect, useState } from "react";
  5. const Quote = () => {
  6.     const [quote, setQuote] = useState("");
  8.     async function _fetchQuote() {
  9.         const res = await fetch('https://api.adviceslip.com/advice');
  10.         const data = await res.json();
  11.         const quote = data['slip']['advice'];
  12.         setQuote(quote);
  13.     }
  15.     useEffect(() => {
  16.         _fetchQuote();
  17.     }, []);
  19.     return <h1>
  20.         <span>Quote: </span>
  21.         <span>{quote}</span>
  22.     </h1>;
  23. }
  25. export default Quote;
英文:

This is my simple react component that is fetching the quote on the client side.

  1. // quote.tsx
  3. import React, { useEffect, useState } from &quot;react&quot;;
  5. const Quote = () =&gt; {
  6.     const [quote, setQuote] = useState(&quot;&quot;);
  8.     async function _fetchQuote() {
  9.         const res = await fetch(&#39;https://api.adviceslip.com/advice&#39;);
  10.         const data = res.json();
  11.         const quote = data[&#39;slip&#39;][&#39;advice&#39;];
  12.         setQuote(quote);
  13.     }
  15.     useEffect(() =&gt; {
  16.         _fetchQuote();
  17.     }, []);
  19.     return &lt;h1&gt;
  20.         &lt;span&gt;Quote: &lt;/span&gt;
  21.         &lt;span&gt;{quote}&lt;/span&gt;
  22.     &lt;/h1&gt;;
  23. }
  25. export default Quote;

This is my astro component, where I have a basic layout and I want to show react component.

  1. // quote-page.astro
  2. ---
  3. import Base from &quot;../layouts/Base.astro&quot;;
  4. import Quote from &quot;./components/quote&quot;;
  5. ---
  7. &lt;Base title=&quot;Qutoes&quot;&gt;
  8.     &lt;Quote client:only=&quot;react&quot; /&gt;
  9. &lt;/Base&gt;

I am using client:only=&quot;react&quot; as the docs said but it seems to give me this error

  1. 06:39:24 PM [astro] reload /src/pages/quote-page.astro
  2.  error   Unable to render `Quote`. When using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer.
  3.   Hint:
  4.     Did you mean to pass `client:only=&quot;react|preact|solid-js|vue|svelte|lit&quot;`? See https://docs.astro.build/en/reference/directives-reference/#clientonly for more information on client:only
  5.   File:
  6.     /home/.../src/page/quote-page.astro

Although I gave the value react as well it does not seem to be working I tried changing the file extension from quote.tsx to quote.jsx not worked.

My astro.config.ts is as follows

  1. import { defineConfig } from &#39;astro/config&#39;;
  2. import sitemap from &#39;@astrojs/sitemap&#39;; // https://astro.build/config
  4. import vercel from &quot;@astrojs/vercel/serverless&quot;;
  6. // https://astro.build/config
  7. export default defineConfig({
  8.   site: &quot;https://url&quot;,
  9.   markdown: {
  10.     syntaxHighlight: &quot;prism&quot;
  11.   },
  12.   integrations: [sitemap()],
  13.   output: &#39;server&#39;,
  14.   adapter: vercel(),
  15. });

My dependencies in package.json

  1. &quot;devDependencies&quot;: {
  2.     &quot;astro&quot;: &quot;^2.3.0&quot;,
  3.     &quot;path-browserify&quot;: &quot;^1.0.1&quot;
  4. },
  5. &quot;dependencies&quot;: {
  6.   &quot;@astrojs/react&quot;: &quot;^2.1.1&quot;,
  7.   &quot;@astrojs/rss&quot;: &quot;^0.2.0&quot;,
  8.   &quot;@astrojs/sitemap&quot;: &quot;^0.1.0&quot;,
  9.   &quot;@astrojs/vercel&quot;: &quot;^3.2.4&quot;,
  10.   &quot;sass&quot;: &quot;^1.52.1&quot;
  11. }

答案1

得分: 2

在 astro.config.js 文件中，在 integrations 部分传递 react() 也是。

参考这里。

英文:

In astro.config.js, under integrations pass react() also.

Reference here.

huangapple
  • 本文由 发表于 2023年4月19日 21:22:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76055053.html
  • astro
  • astrojs
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定