Ggtcf

What is the reasoning behind standardization (dividing by standard deviation)?

What is the tangent at a sharp point on a curve?

What is 露わになる affecting in the following sentence, '才能の持ち主' (持ち主 to be specific) or '才能'?

What will the Frenchman say?

Unfrosted light bulb

PTIJ: Which Dr. Seuss books should one obtain?

Why doesn't the fusion process of the sun speed up?

Jem'Hadar, something strange about their life expectancy

Exit shell with shortcut (not typing exit) that closes session properly

Would mining huge amounts of resources on the Moon change its orbit?

CLI: Get information Ubuntu releases

Have any astronauts/cosmonauts died in space?

Fair way to split coins

Nested Dynamic SOQL Query

Asserting that Atheism and Theism are both faith based positions

DisplayForm problem with pi in FractionBox

Can "few" be used as a subject? If so, what is the rule?

Why do I have a large white artefact on the rendered image?

Why didn’t Eve recognize the little cockroach as a living organism?

Why is "la Gestapo" feminine?

Print last inputted byte

Can a university suspend a student even when he has left university?

Is VPN a layer 3 concept?

Was World War I a war of liberals against authoritarians?

Create type for component based on props passed [duplicate]

0

0

This question already has an answer here:

• 
  How do I type this 'as' JSX attribute in TypeScript?
  
  1 answer
  
  

I'm creating a component that looks like this:

<Button component='a' href='/'>
 Link
</Button>

I want to get the type definition of the component prop, so I can automatically include it in the props for the Button component. Any ideas on what the interface/type for the Button component should look like

javascript reactjs typescript

share|improve this question

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

marked as duplicate by Titian Cernicova-Dragomir typescript
Users with the  typescript badge can single-handedly close typescript questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 7 at 19:07

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment | 

0

0

This question already has an answer here:

• 
  How do I type this 'as' JSX attribute in TypeScript?
  
  1 answer
  
  

I'm creating a component that looks like this:

<Button component='a' href='/'>
 Link
</Button>

I want to get the type definition of the component prop, so I can automatically include it in the props for the Button component. Any ideas on what the interface/type for the Button component should look like

javascript reactjs typescript

share|improve this question

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

marked as duplicate by Titian Cernicova-Dragomir typescript
Users with the  typescript badge can single-handedly close typescript questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 7 at 19:07

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment | 

This question already has an answer here:

• 
  How do I type this 'as' JSX attribute in TypeScript?
  
  1 answer
  
  

I'm creating a component that looks like this:

<Button component='a' href='/'>
 Link
</Button>

I want to get the type definition of the component prop, so I can automatically include it in the props for the Button component. Any ideas on what the interface/type for the Button component should look like

javascript reactjs typescript

share|improve this question

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

<Button component='a' href='/'>
 Link
</Button>

share|improve this question

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

share|improve this question

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

edited Mar 7 at 19:46

Erik Philips

41.3k693126

edited Mar 7 at 19:46

Erik Philips

41.3k693126

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

asked Mar 7 at 18:52

Oluwakorede FashokunOluwakorede Fashokun

44110

2 Answers
2

active

oldest

votes

0

Your Button component could be typed like that:

import * as React from 'react';

type ButtonProps = 
 component: string,
 href: string,

type ButtonState = 
export default class Button extends React.Component<ButtonProps , ButtonState > 
 constructor(props) 
 super(props);
 this.state = 
 
 render() return <div/> 

I wrote a whole article on building a TypeScript + React app from A to Z, check it out for complete details and explanations!

share|improve this answer

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

add a comment | 

0

I've used this pattern before. Declare the component prop of type React.ComponentType<T> | string. Your Button component should look a bit like this:

export interface ButtonProps 
 component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
 href?: string;
 children?: React.ReactNode;


export function Button(props: ButtonProps) 
 const 
 component: Component = "button", // note: uppercase
 children,
 ...other
 = props;

 return (
 <Component ...other>
 children
 </Component>
 );

share|improve this answer

edited Mar 7 at 19:10

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice, thanks. But how do I check that the ...other props exist on the type for the button component?
  
  – Oluwakorede Fashokun
  Mar 7 at 19:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @OluwakoredeFashokun any would cover it, but that's a bit of a hack. Perhaps use React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>>, or declare what props on the component you want to support.
  
  – p.s.w.g
  Mar 7 at 19:05
  
  

  
  
  
  

add a comment | 

0

Your Button component could be typed like that:

import * as React from 'react';

type ButtonProps = 
 component: string,
 href: string,

type ButtonState = 
export default class Button extends React.Component<ButtonProps , ButtonState > 
 constructor(props) 
 super(props);
 this.state = 
 
 render() return <div/> 

I wrote a whole article on building a TypeScript + React app from A to Z, check it out for complete details and explanations!

share|improve this answer

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

add a comment | 

0

Your Button component could be typed like that:

import * as React from 'react';

type ButtonProps = 
 component: string,
 href: string,

type ButtonState = 
export default class Button extends React.Component<ButtonProps , ButtonState > 
 constructor(props) 
 super(props);
 this.state = 
 
 render() return <div/> 

I wrote a whole article on building a TypeScript + React app from A to Z, check it out for complete details and explanations!

share|improve this answer

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

add a comment | 

Your Button component could be typed like that:

import * as React from 'react';

type ButtonProps = 
 component: string,
 href: string,

type ButtonState = 
export default class Button extends React.Component<ButtonProps , ButtonState > 
 constructor(props) 
 super(props);
 this.state = 
 
 render() return <div/> 

I wrote a whole article on building a TypeScript + React app from A to Z, check it out for complete details and explanations!

share|improve this answer

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

import * as React from 'react';

type ButtonProps = 
 component: string,
 href: string,

type ButtonState = 
export default class Button extends React.Component<ButtonProps , ButtonState > 
 constructor(props) 
 super(props);
 this.state = 
 
 render() return <div/> 

share|improve this answer

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

answered Mar 7 at 18:56

Nino FiliuNino Filiu

2,02621227

0

I've used this pattern before. Declare the component prop of type React.ComponentType<T> | string. Your Button component should look a bit like this:

export interface ButtonProps 
 component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
 href?: string;
 children?: React.ReactNode;


export function Button(props: ButtonProps) 
 const 
 component: Component = "button", // note: uppercase
 children,
 ...other
 = props;

 return (
 <Component ...other>
 children
 </Component>
 );

share|improve this answer

edited Mar 7 at 19:10

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice, thanks. But how do I check that the ...other props exist on the type for the button component?
  
  – Oluwakorede Fashokun
  Mar 7 at 19:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @OluwakoredeFashokun any would cover it, but that's a bit of a hack. Perhaps use React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>>, or declare what props on the component you want to support.
  
  – p.s.w.g
  Mar 7 at 19:05
  
  

  
  
  
  

add a comment | 

0

I've used this pattern before. Declare the component prop of type React.ComponentType<T> | string. Your Button component should look a bit like this:

export interface ButtonProps 
 component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
 href?: string;
 children?: React.ReactNode;


export function Button(props: ButtonProps) 
 const 
 component: Component = "button", // note: uppercase
 children,
 ...other
 = props;

 return (
 <Component ...other>
 children
 </Component>
 );

share|improve this answer

edited Mar 7 at 19:10

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice, thanks. But how do I check that the ...other props exist on the type for the button component?
  
  – Oluwakorede Fashokun
  Mar 7 at 19:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @OluwakoredeFashokun any would cover it, but that's a bit of a hack. Perhaps use React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>>, or declare what props on the component you want to support.
  
  – p.s.w.g
  Mar 7 at 19:05
  
  

  
  
  
  

add a comment | 

I've used this pattern before. Declare the component prop of type React.ComponentType<T> | string. Your Button component should look a bit like this:

export interface ButtonProps 
 component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
 href?: string;
 children?: React.ReactNode;


export function Button(props: ButtonProps) 
 const 
 component: Component = "button", // note: uppercase
 children,
 ...other
 = props;

 return (
 <Component ...other>
 children
 </Component>
 );

share|improve this answer

edited Mar 7 at 19:10

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

export interface ButtonProps 
 component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
 href?: string;
 children?: React.ReactNode;


export function Button(props: ButtonProps) 
 const 
 component: Component = "button", // note: uppercase
 children,
 ...other
 = props;

 return (
 <Component ...other>
 children
 </Component>
 );

share|improve this answer

edited Mar 7 at 19:10

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256

answered Mar 7 at 18:59

p.s.w.gp.s.w.g

119k19214256