javascript - OnClick 事件不适用于 Astro 中的 React 组件

Question

我正在为我的 astro 项目使用一个 react 组件，但没有调用 onclick 事件。我只是想在按下链接时打印 link clicked，但我看不到任何事件被调用。这是我的 react 组件 -

import { useState } from "react"
import '../styles/components/tabs.css';

export function Tabs({headings=[], contents=[]}) {
  const [selectedHeading, setSelectedHeading] = useState((headings.length) ? 0 : -1);
  const handleClick  = (index) => {
    setSelectedHeading(index);
  }

  return (
    <div class="tabs" onClick={handleClick}>
      <ul class="tabs-header">
      {headings.map((heading, index) => {
        return <li 
                id={index} 
                style={
                  (selectedHeading === index) ? {color: '#A741FF'} : null
                } 
                onClick={() => console.log('link clicked')}
                >
                  {heading}
                </li>
      })}
      </ul>
      <ul class="tabs-content">
        {
          (selectedHeading === -1) ? null : contents[selectedHeading]
        }
      </ul>
    </div>
  )
}

Answer 1

Astro 设计为默认搭载 0 Frameworks javascript，因此，当使用带有 js 的 Framework 组件时，您需要设置一个所谓的 hydration rule

您使用 react 组件的 .astro 组件或页面应如下所示，使用例如client:load 指令。

---
import InteractiveButton from '../components/InteractiveButton.jsx';
---
<InteractiveButton client:load />

引用 Astro 文档:https://docs.astro.build/en/core-concepts/framework-components/#hydrating-interactive-components