Shadcn Shadcn 下调MenuTrigger 儿童不向儿童展示
原标题：Shadcn DropdownMenuTrigger asChild wont show children
I have a situation where I want to use shadcn Button as a trigger for DropdownMenu, and when I make DropdownMenuTrigger asChild, it wont render the children.
I understand that there needs to be something done in this case, I tried to read and understand from this Radix Primitives Composition
I hacked together something I thought would be correct based on the link above, but nothing ...
What must I do to have it working?
Here is a simple code, which results in DropdownMenuTrigger to not show children correctly.
import React from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../../../@/components/ui/dropdown-menu";
import { Button } from "../../../@/components/ui/button";
import { Menu } from "lucide-react";
const MyButton = React.forwardRef(
(props, forwardedRef: React.Ref) => (
)
);
const ListingMenu = (): JSX.Element => {
return (
My Account
Profile
Billing
Team
Subscription
);
};
export default ListingMenu;
问题回答
I managed to get it working by using buttonVariants helper, provided in the shadcn button component, like so
import React from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../../../@/components/ui/dropdown-menu";
import { Menu } from "lucide-react";
import { buttonVariants } from "../../../@/components/ui/button";
const ListingMenu = (): JSX.Element => {
return (
My Account
Profile
Billing
Team
Subscription
);
};
export default ListingMenu;
I assume without using "buttonVariants" helper, u can directly apply the styles and use your custom Button component inside the DropdownMenuTrigger.
const ListingMenu = (): JSX.Element => {
return (
...
The issue was when the DropdownMenuTrigger with asChild, it s important to ensure that the custom component passed to it correctly forwards refs.
You have to change the width of Button inside your MyButton: ( currently I am removing it )
const MyButton = React.forwardRef(
(props, forwardedRef: React.Ref) => (
)
);
相关问题
Why am I receiving a Cannot read properties of null (reading studentId ) error in my code when trying to update data in a React CRUD app?
This is my first question, and english is not my first language, sorry if my question is hard to understand I was trying to make simple CRUD app with mysql database and react as the frontend, and i ...
How to use one react app into another react app?
I have two react apps, parent app and child app. and child app have an hash router. I have build the child app using npm run build, It creates build folder. That build folder moved into inside the ...
我如何利用Params(Params)在React的初期阶段进行过滤,而不是提出另一个要求?
这是我的第一个问题,请与我一起回答。 I m从事一项SPA React项目,该项目跟踪农场及其相关床位,并可使用一些帮助。 我愿就......提供一些数据。
how to get selected value in Ant Design
I want to print the selected value, and below is my option list: const vesselName = [ { value: 0 , label: ALBIDDA , }, { value: 1 , label: ALRUMEILA , }, { value: 2 ,...
why custom filter reset button is not working for antd filterdropdown in table?
I have this custom filter for date , filter button is working as expected but reset button is not working, can anyone help me,what s wrong here? Below is my code which contain handlesearch,handlereset ...
How to add a <br> tag in reactjs between two strings?
I am using react. I want to add a line break <br> between strings No results and Please try another search term. . I have tried No results.<br>Please try another search term. but ...
React DnD - "Cannot have two HTML5 backends at the same time."
I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD. The purpose is to make an app like trello but for an recruitment process. My front is in ReactJS. I have 3 ...
热门标签
- winforms
- combobox
- fogbugz
- java
- date
- internationalization
- asp.net
- iis
- url-rewriting
- urlrewriter
- c#
- enums
- ocaml
- haxe
- algorithm
- string
- viewstate
- .net
- c++
- c
- symbol-table
- mysql
- database
- postgresql
- licensing
- migration
- vb.net
- vb6
- declaration
- vb6-migration
- python
- psycopg2
- backup
- vmware
- virtualization
- gnu-screen
- authentication
- desktop
- excel
- xll
- cultureinfo
- regioninfo
- oracle
- client
- session
- download
- html
- virtual
- constructor
- scenarios
- perl
- full-text-search
- javascript
- ajax
- testing
- oop
- inheritance
- vim
- encapsulation
- information-hiding