- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当将forwardRef与泛型一起使用时,我得到类型'IntrinsicAttributes'上不存在属性'children'
或类型'IntrinsicAttributes'上不存在属性'ref'
.
https://codesandbox.io/s/react-typescript-0dt6d?fontsize=14
上面 CodeSandbox 链接中的相关代码复制到此处:
interface SimpleProps<T extends string>
extends React.HTMLProps<HTMLButtonElement> {
random: T;
}
interface Props {
ref?: React.RefObject<HTMLButtonElement>;
children: React.ReactNode;
}
function WithGenericsButton<T extends string>() {
return React.forwardRef<HTMLButtonElement, Props & SimpleProps<T>>(
({ children, ...otherProps }, ref) => (
<button ref={ref} className="FancyButton" {...otherProps}>
{children}
</button>
)
);
}
() => (
<WithGenericsButton<string> ref={ref} color="green">
Click me! // Errors: Property 'children' does not exist on type 'IntrinsicAttributes'
</WithGenericsButton>
)
这里建议了一个潜在的解决方案,但不确定如何在这种情况下实现: https://github.com/microsoft/TypeScript/pull/30215(从 https://stackoverflow.com/a/51898192/9973558 找到)
最佳答案
因此,这里的主要问题是您在渲染中返回 React.forwardRef
的结果,这不是渲染函数的有效返回类型。您需要将forwardRef结果定义为它自己的组件,然后将其呈现在您的WithGenericsButton高阶组件中,如下所示:
import * as React from "react";
interface SimpleProps<T extends string> {
random: T;
}
interface Props {
children: React.ReactNode;
color: string;
}
function WithGenericsButton<T extends string>(
props: Props & SimpleProps<T> & { ref: React.Ref<HTMLButtonElement> }
) {
type CombinedProps = Props & SimpleProps<T>;
const Button = React.forwardRef<HTMLButtonElement, CombinedProps>(
({ children, ...otherProps }, ref) => (
<button ref={ref} className="FancyButton" {...otherProps}>
{children}
</button>
)
);
return <Button {...props} />;
}
const App: React.FC = () => {
const ref = React.useRef<HTMLButtonElement>(null);
return (
<WithGenericsButton<string> ref={ref} color="green" random="foo">
Click me!
</WithGenericsButton>
);
};
如果您将其放入沙箱或 Playground 中,您将看到 props
现在已正确键入,包括 T
的 random
属性
关于reactjs - forwardRef : Property 'ref' does not exist on type 'IntrinsicAttributes' 的泛型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57750777/
我使用的技术是 react、typescript 和 styled-components。我正在尝试创建选择组件以便在 React Hook Form 中使用它。起初,看起来一切都是正确的,但我从 t
什么是forwardRef用angular做的,它的用法是什么? 这是一个 example : import {Component, Injectable, forwardRef} from '@an
我买了一个 Angular 4 模板,主要是为了看看布局是如何完成的,但包括工作组件,我注意到他们在应用程序组件中有一堆设置,主要用于菜单、更改样式、主要控制外部框架. 在菜单组件和其他一些组件中,它
这是我的带有 forwardRef 的自定义组件。 ref 在组件内部代码中是必需的,但父组件将其作为 prop 发送是可选的 const MyComponent = React.forwardRef
@Component({ selector: 'my-component', template: ``, providers: [ { provide: SourceCompone
TL;DR:我在库中有一个功能组件,它具有 react@^16.3.0 作为对等依赖项。如果我将此组件包装在 React.forwardRef 中,这是否是重大更改? 根据 forwarding Re
我当前正在运行 React 16.3.1 和 Styled Components 3.2.5,并且在尝试使用 React.forwardRef 时遇到问题。 我有一个输入组件,它由一个包含标签和输入字
我正在将我的应用程序移动到 Material UI V4,并且当以编程方式设置“to”属性时,我正在努力将我的 react 路由器链接组件移动到 forwardRef 包装的组件中。 下面的代码有效,
我不明白这是什么意思: const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); 如果
我正在尝试使用 React.forwardRef,但对如何让它在基于类的组件(而非 HOC)中工作感到困惑。 文档示例使用元素和功能组件,甚至将类包装在高阶组件的函数中。 因此,从类似 this 的内
我有一个用 React.forwardRef 包装的组件,碰巧它也是一个复合组件。 我不知道该如何保养 Form.Item = FormItem; 同时 Form 组件函数被 forwardRef
父组件: const Parent = (props) => { const ref = useRef(); return } 和 child : const Child = forward
我已经使用 React 转发了 ref forwardRef 下面是我的代码: interface PropsDummy {} const ProfileMenu = forwardRef((prop
我需要访问组件内的文本区域的引用。在组件中,它很简单: const MyComponent = () => { const inputRef = useRef(); return } 现在
我正在尝试编写两个 React 样式的组件(使用 Emotion 10),将一些自定义渲染逻辑指定到其中一个中,并保留检索它们的“引用”的能力。 这是我的代码: const Foo = styled(
我对 React.forwardRef 的观点感到困惑.正如其 documentation 中所述,据我所知,它的主要用途是用于 父组件 访问 DOM 的元素子组件 .但我已经可以做到这一点,甚至不必
我收到警告 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did
我有一个属于 UI 库的组件,我们称它为输入组件。使用这个库调用Input时,我可以调用的类型有很多。例如 现在我想给这个Input组件写一个wrapper,所以我这样写 type InputW
我需要使用 ref获取孙组件的状态,我使用 useImperativeHandle 对其进行了自定义,简化了整个代码 here . function App() { const ref = use
我目前在我的 React 应用程序中收到以下错误: Function components cannot be given refs. Attempts to access this refwill
我是一名优秀的程序员,十分优秀!