Component accepts `renderAs` and should accept any of its props
I have a component Button that takes a prop renderAs.
For example, I want to render it as a Link from react-router-dom, but the Button doesn't accept the props that Link accepts.
Generically, how could I get the Button to allow all props that the component defined in renderAs accepts?
Here is a link in my declaration file to the Button type.
Code:
Button is a simple function that renders an Element, and the Element looks like this:
const Element = React.forwardRef(({
className,
renderAs,
...allProps
}, ref) => {
const RenderAs = renderAs;
const props = modifiers.clean(allProps);
return (
<RenderAs
ref={ref}
className={classnames(className, modifiers.classnames(allProps)) || undefined}
{...props}
/>
);
});
(the question can then be assumed to be: how can I get an Element to take any props that the component to renderAs accepts?)
The (relevant) interface for Element in my declaration file looks like this:
interface ElementProps
extends Partial<
React.ComponentPropsWithoutRef<keyof JSX.IntrinsicElements>
> {
className?: string;
renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
// [key: string]: any; // former attempt; but disables all prop checking
}
declare const Element: React.ForwardRefExoticComponent<
React.PropsWithoutRef<ElementProps> & React.RefAttributes<any>
>;
reactjs typescript
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
add a comment |
I have a component Button that takes a prop renderAs.
For example, I want to render it as a Link from react-router-dom, but the Button doesn't accept the props that Link accepts.
Generically, how could I get the Button to allow all props that the component defined in renderAs accepts?
Here is a link in my declaration file to the Button type.
Code:
Button is a simple function that renders an Element, and the Element looks like this:
const Element = React.forwardRef(({
className,
renderAs,
...allProps
}, ref) => {
const RenderAs = renderAs;
const props = modifiers.clean(allProps);
return (
<RenderAs
ref={ref}
className={classnames(className, modifiers.classnames(allProps)) || undefined}
{...props}
/>
);
});
(the question can then be assumed to be: how can I get an Element to take any props that the component to renderAs accepts?)
The (relevant) interface for Element in my declaration file looks like this:
interface ElementProps
extends Partial<
React.ComponentPropsWithoutRef<keyof JSX.IntrinsicElements>
> {
className?: string;
renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
// [key: string]: any; // former attempt; but disables all prop checking
}
declare const Element: React.ForwardRefExoticComponent<
React.PropsWithoutRef<ElementProps> & React.RefAttributes<any>
>;
reactjs typescript
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59
add a comment |
I have a component Button that takes a prop renderAs.
For example, I want to render it as a Link from react-router-dom, but the Button doesn't accept the props that Link accepts.
Generically, how could I get the Button to allow all props that the component defined in renderAs accepts?
Here is a link in my declaration file to the Button type.
Code:
Button is a simple function that renders an Element, and the Element looks like this:
const Element = React.forwardRef(({
className,
renderAs,
...allProps
}, ref) => {
const RenderAs = renderAs;
const props = modifiers.clean(allProps);
return (
<RenderAs
ref={ref}
className={classnames(className, modifiers.classnames(allProps)) || undefined}
{...props}
/>
);
});
(the question can then be assumed to be: how can I get an Element to take any props that the component to renderAs accepts?)
The (relevant) interface for Element in my declaration file looks like this:
interface ElementProps
extends Partial<
React.ComponentPropsWithoutRef<keyof JSX.IntrinsicElements>
> {
className?: string;
renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
// [key: string]: any; // former attempt; but disables all prop checking
}
declare const Element: React.ForwardRefExoticComponent<
React.PropsWithoutRef<ElementProps> & React.RefAttributes<any>
>;
reactjs typescript
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
I have a component Button that takes a prop renderAs.
For example, I want to render it as a Link from react-router-dom, but the Button doesn't accept the props that Link accepts.
Generically, how could I get the Button to allow all props that the component defined in renderAs accepts?
Here is a link in my declaration file to the Button type.
Code:
Button is a simple function that renders an Element, and the Element looks like this:
const Element = React.forwardRef(({
className,
renderAs,
...allProps
}, ref) => {
const RenderAs = renderAs;
const props = modifiers.clean(allProps);
return (
<RenderAs
ref={ref}
className={classnames(className, modifiers.classnames(allProps)) || undefined}
{...props}
/>
);
});
(the question can then be assumed to be: how can I get an Element to take any props that the component to renderAs accepts?)
The (relevant) interface for Element in my declaration file looks like this:
interface ElementProps
extends Partial<
React.ComponentPropsWithoutRef<keyof JSX.IntrinsicElements>
> {
className?: string;
renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
// [key: string]: any; // former attempt; but disables all prop checking
}
declare const Element: React.ForwardRefExoticComponent<
React.PropsWithoutRef<ElementProps> & React.RefAttributes<any>
>;
reactjs typescript
reactjs typescript
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
edited Nov 19 '18 at 19:59
Devin
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
asked Nov 19 '18 at 19:12
DevinDevin
1,21821421
1,21821421
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59
add a comment |
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381153%2fcomponent-accepts-renderas-and-should-accept-any-of-its-props%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381153%2fcomponent-accepts-renderas-and-should-accept-any-of-its-props%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Consider providing all relevant code in the question. It should be understandable without visiting off-site resources. Links may become broken.
– estus
Nov 19 '18 at 19:26
@estus updated to show code samples. thanks!
– Devin
Nov 19 '18 at 19:59