aria-expanded 不适用于 nextjs 应用程序

Question

Overview: I have a button that works fine in a normal index file with tailwindcss.

Problem: I am trying to use it in my nextjs project, with typescript files instead now. I have an issue with the @click and aria-expanded, as it gives an error

Button

<button type="button"
className="p-1 text-gray-900 transition-all duration-200 bg-transparent rounded-md hover:bg-gray-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
@click="expanded = !expanded" :aria-expanded="expanded">
<span x-show="!expanded" aria-hidden="true">
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</span>

<span x-show="expanded" aria-hidden="true">
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</button>

Recap: Again, this button works fine in a normal index.html file with tailwindcss, but when trying to use in nextjs typescript (tsx extension), I get the error Identifier Expected

Answer 1

The code that you have seems to be for another framework considering that it uses @click . Since the @ and: aren't recognized by React, that leads to the Identifier Expected error.

To fix the issue, you can change :aria-expanded to aria-expanded (removing the colon), as well as change the @click function to a React equivalent, such as onClick={() => setOpen( open)} (assuming you have a state var called open ).

Following this, you should also make sure to replace x-show with a React equivalent, perhaps using something like {open && <>your element</>}