Component accepts `renderAs` and should accept any of its props












1














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>
>;









share|improve this question
























  • 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
















1














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>
>;









share|improve this question
























  • 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














1












1








1


2





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>
>;









share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 19 '18 at 19:59







Devin

















asked Nov 19 '18 at 19:12









DevinDevin

1,21821321




1,21821321












  • 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










  • @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












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
});


}
});














draft saved

draft discarded


















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
















draft saved

draft discarded




















































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.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • 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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

'app-layout' is not a known element: how to share Component with different Modules

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

WPF add header to Image with URL pettitions [duplicate]