mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
6f7d6c01da
* no-op: Run prettier --write on react-router-dom. * Allow correct "ref" to be passed Link. "ref" can be used rather than "innerRef" to return a ref to the <a> element inside of <Link>. See: [1]: reacttraining.com/react-router/web/api/Link/innerref-function Where it says: > As of React Router 5.1, if you are using React 16 you should not > need this prop because we forward this ref to the underlying <a>. > Use a normal ref instead.Allows access to the underlying ref of the > component. [2]: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js#L74-L121 Link is the result of forwardRef rather than an actual React class. This implies a few things: 1. It is a function (see the return type of React.ForwardRefExoticComponent) rather than a class 2. Its reference is to an inner <a> element, rather than what's in React.Component, which is a Ref to the element itself. This introduces a potential incompatibility where users can't use "new Link" anymore. But that reflects reality (Link is callable not newable). Since Link was previously exported as a class, we need to continue to support it being used as both a type and a value. Since Link was exported as a generic, we need to continue to support that. As a result: 1. Link is exported as a function that happens to implement the type corresponding to the result of `forwardRef<HTMLAnchorElement, LinkProps<S>>`. 2. Link is still exported as a type (interface) which is the same as that of the return value of `forwardRef<...>`. * Make sure Link<S> can be used as a generic. This is is only supported in TS >= 2.9. I bumped the minimum TS supported version to 2.9 since 2.8 support ends this month anyway. * Apply prettier --write to tests. * Apply same change (forwardRef) to NavLink. 1. https://reacttraining.com/react-router/web/api/NavLink NavLink is a version of <Link> with the same props. 2. NavLink is similarly implemented in terms of forwardRef, so all the justification from the previous commit applies. See: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js * To maintain TS 2.8 compatibility, use React.createElement to test Link<{foo:number}> and NavLink. When TS 2.8 compatibility is no longer needed, this CL can be reverted as-is.
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import { NavLink, NavLinkProps, match, Link, RouteComponentProps, LinkProps } from 'react-router-dom';
|
|
import * as H from 'history';
|
|
|
|
const getIsActive = (extraProp: string) => (match: match, location: H.Location) => !!extraProp;
|
|
|
|
interface Props extends NavLinkProps {
|
|
extraProp: string;
|
|
}
|
|
|
|
export default function(props: Props) {
|
|
const { extraProp, ...rest } = props;
|
|
const isActive = getIsActive(extraProp);
|
|
return <NavLink {...rest} isActive={isActive} />;
|
|
}
|
|
|
|
type OtherProps = RouteComponentProps<{
|
|
id: string;
|
|
}>;
|
|
|
|
const Component: React.FC<OtherProps> = props => {
|
|
if (!props.match) {
|
|
return null;
|
|
}
|
|
|
|
const { id } = props.match.params;
|
|
return <div>{id}</div>;
|
|
};
|
|
|
|
<Link to="/url" />;
|
|
|
|
const MyLink: React.FC<LinkProps> = props => <Link style={{ color: 'red' }} {...props} />;
|
|
<Link to="/url" component={MyLink} />;
|
|
|
|
<Link to={location => ({ ...location, pathname: '/pizza' })} />;
|
|
<NavLink to={location => ({ ...location, pathname: '/pizza' })} />;
|
|
|
|
const refCallback: React.Ref<HTMLAnchorElement> = node => {};
|
|
<Link to="/url" replace={true} innerRef={refCallback} />;
|
|
<Link to="/url" replace={true} ref={refCallback} />;
|
|
<NavLink to="/url" replace={true} innerRef={refCallback} />;
|
|
<NavLink to="/url" replace={true} ref={refCallback} />;
|
|
const ref = React.createRef<HTMLAnchorElement>();
|
|
<Link to="/url" replace={true} innerRef={ref} />;
|
|
<Link to="/url" replace={true} ref={ref} />;
|
|
<NavLink to="/url" replace={true} innerRef={ref} />;
|
|
<NavLink to="/url" replace={true} ref={ref} />;
|
|
|
|
<Link to="/url" aria-current="page" />;
|
|
|
|
React.createElement<LinkProps<{ foo: number }> & React.RefAttributes<HTMLAnchorElement>>(Link, {
|
|
to: { pathname: 'abc', state: { foo: 5 } },
|
|
});
|
|
React.createElement<NavLinkProps<{ foo: number }> & React.RefAttributes<HTMLAnchorElement>>(NavLink, {
|
|
to: { pathname: 'abc', state: { foo: 5 } },
|
|
});
|