Daisyuiでのエラー anchorName does not exist in type

1. styleプロパティを削除し、代わりにDaisyUIの機能に基づいたクラス名などを使用してください。
2. popoverの使い方や、DaisyUIのドキュメントで推奨されている構文を確認してください。

<button className="btn" popoverTarget="popover-1">
  Button
</button>

<ul className="dropdown menu w-52 rounded-box bg-base-100 shadow-sm" popover="auto" id="popover-1">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

import React from 'react';

const DropdownExample = () => {
  return (
    <div>
      <button className="btn" popoverTarget="popover-1" data-popover-placement="bottom">
        Button
      </button>

      <ul 
        className="dropdown menu w-52 rounded-box bg-base-100 shadow-sm"
        popover="auto" 
        id="popover-1" 
        style={{ display: 'none' }} // 初期状態では非表示
      >
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
      </ul>
    </div>
  );
}

export default DropdownExample;

ポイント:

1. data属性の使用:

   • data-popover-placementを使ってドロップダウンの位置を指定します（例：bottom、top、left、rightなど）。

2. 表示制御:

   • 初期ではstyle={{ display: 'none' }}で非表示にして、ボタンをクリックしたときに表示できるようにします。この場合、ポップオーバーの表示・非表示を制御するロジックを追加する必要があります。

3. カスタムロジックの追加:

   • ボタンがクリックされたときに状態を更新し、ドロップダウンを表示するためのロジックを含めることも考慮してください。たとえば、useStateフックを利用して、ドロップダウンの表示状態を管理することができます。

import React, { useState } from 'react';

const DropdownExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button className="btn" onClick={toggleDropdown}>
        Button
      </button>

      {isOpen && (
        <ul className="dropdown menu w-52 rounded-box bg-base-100 shadow-sm">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      )}
    </div>
  );
}

export default DropdownExample;