react-props 相关问题

我使用 TailwindCSS 和 onClick 事件设计了下面的按钮。新增项目我使用 TailwindCSS 和 onClick 事件设计了下面的按钮。 <button className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4" onClick={handleClick}> Add Item </button> 现在我尝试为此按钮创建一个 React 组件。我想在任何地方使用这个组件，有时它会有 onClick 属性，有时会有 onMouseDown 等。所以我试图在组件内的按钮元素上设置传递给我的组件的任何属性。我想出了下面的。 function Button({ children, ...props }: { children: React.ReactNode; props?: any; }) { return ( <button className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4" {...props} > {children} </button> ); } 我不知道如何设置道具类型，所以我暂时将其设置为any。这段代码没有显示任何错误。但是当我尝试使用如下组件时，它说： Type '{ children: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { children: ReactNode; props?: any; }' <Button onClick={handleClick}> Add Item </Button> 我怎样才能让它工作？ { children: React.ReactNode; props?: any; // 👈 this is incorrect } 您的组件不接受 props 属性。相反，你正在传播其余的道具。这意味着上面的类型定义将与您传递给它的内容不匹配。假设您只是创建一个按钮包装器，您可以使用其默认属性（已包含 children）。 import type { ButtonHTMLAttributes } from "react"; function Button({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) { // ... } 您可能还想防止消费者传入 className ，这会覆盖您自己的类。您可以在...之后添加您的内容 <button {...props} className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4" > {children} </button> 或者在prop类型中明确禁止 type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">; function Button({ children, ...props }: ButtonProps) { return ( <button className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4" {...props} > {children} </button> ); }

reactjs typescript react-props

回答 1 投票 0

将渲染逻辑作为组件 prop 与回调函数进行反应

假设一个组件需要渲染一堆元素，但渲染必须是可定制的，因为这个组件会在很多地方重复使用。把它想象成一个日历组件，需要......

javascript reactjs rendering react-props

回答 1 投票 0

使用react-hook-form进行表单模式验证

我一直在开发反应表单，我需要限制用户输入特殊字符并仅允许这些字符：[A-Za-z]。我已经尝试了下面的代码，但我仍然能够插入内部规范...

reactjs forms react-hooks react-props react-forms

回答 4 投票 0

使用 useReducer 时，道具未从父级传递给子级或孙级

所以我想简化将 props 传递给父组件的孙子组件，其中更改打开或关闭的按钮或模式的状态，例如： [open, setOpen]= useState(),