React with TypeScript: how to access HOC methods in new coponent
1
HI I have an interface for a props and a state:
interface IOffersProps
{
nextStep: () => void;
step: number
}
export default IOffersProps
interface IOffersState
{}
export default IOffersState;
I created a HOC, that has for example a myhocMethod method, like below:
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} />
);
}
}
export default addOffersLogic;
Now in my new component, I can't access myhocMethod method. I am trying do access it like this.
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
My goal is to place the same logic in one file.
thnx
reactjs typescript higher-order-components
asked Jan 20 at 14:21
WasysterWasyster
3181523
add a comment |
1
HI I have an interface for a props and a state:
interface IOffersProps
{
nextStep: () => void;
step: number
}
export default IOffersProps
interface IOffersState
{}
export default IOffersState;
I created a HOC, that has for example a myhocMethod method, like below:
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} />
);
}
}
export default addOffersLogic;
Now in my new component, I can't access myhocMethod method. I am trying do access it like this.
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
My goal is to place the same logic in one file.
thnx
reactjs typescript higher-order-components
asked Jan 20 at 14:21
WasysterWasyster
3181523
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26
add a comment |
1
1
1
HI I have an interface for a props and a state:
interface IOffersProps
{
nextStep: () => void;
step: number
}
export default IOffersProps
interface IOffersState
{}
export default IOffersState;
I created a HOC, that has for example a myhocMethod method, like below:
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} />
);
}
}
export default addOffersLogic;
Now in my new component, I can't access myhocMethod method. I am trying do access it like this.
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
My goal is to place the same logic in one file.
thnx
reactjs typescript higher-order-components
asked Jan 20 at 14:21
WasysterWasyster
3181523
HI I have an interface for a props and a state:
interface IOffersProps
{
nextStep: () => void;
step: number
}
export default IOffersProps
interface IOffersState
{}
export default IOffersState;
I created a HOC, that has for example a myhocMethod method, like below:
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} />
);
}
}
export default addOffersLogic;
Now in my new component, I can't access myhocMethod method. I am trying do access it like this.
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
My goal is to place the same logic in one file.
thnx
reactjs typescript higher-order-components
reactjs typescript higher-order-components
asked Jan 20 at 14:21
WasysterWasyster
3181523
asked Jan 20 at 14:21
WasysterWasyster
3181523
edited Jan 20 at 14:29
Wasyster
asked Jan 20 at 14:21
WasysterWasyster
3181523
asked Jan 20 at 14:21
WasysterWasyster
3181523
asked Jan 20 at 14:21
WasysterWasyster
3181523
3181523
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26
add a comment |
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26
add a comment |
1 Answer
1
active
oldest
votes
0
In order to access a method defined in the HOC you need to pass it as props to the component that is wrapped with the HOC
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} myhocMethod={this.myhocMethod}/>
);
}
}
export default addOffersLogic;
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.props.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
add a comment |
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
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%2f54277385%2freact-with-typescript-how-to-access-hoc-methods-in-new-coponent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
In order to access a method defined in the HOC you need to pass it as props to the component that is wrapped with the HOC
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} myhocMethod={this.myhocMethod}/>
);
}
}
export default addOffersLogic;
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.props.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
add a comment |
0
In order to access a method defined in the HOC you need to pass it as props to the component that is wrapped with the HOC
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} myhocMethod={this.myhocMethod}/>
);
}
}
export default addOffersLogic;
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.props.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
add a comment |
0
0
0
In order to access a method defined in the HOC you need to pass it as props to the component that is wrapped with the HOC
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} myhocMethod={this.myhocMethod}/>
);
}
}
export default addOffersLogic;
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.props.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
In order to access a method defined in the HOC you need to pass it as props to the component that is wrapped with the HOC
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>
class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
{
constructor(props: TProp & IOffersProps)
{
super(props);
this.myhocMethod= this.myhocMethod.bind(this);
}
myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
{
//do something
};
render()
{
return(
<Component {...this.props} myhocMethod={this.myhocMethod}/>
);
}
}
export default addOffersLogic;
class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
constructor(props: IOffersProps & WithStyles<typeof styles>)
{
super(props);
}
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel>
<HorizontalLinearStepper step={this.props.step} />
Offers
<Button
color="primary"
className={css.button}
onClick={this.props.myhocMethod}>
Continue
</Button>
<Footer />
</StackPanel>
return Body();
}
}
const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
answered Jan 21 at 9:10
Shubham KhatriShubham Khatri
84k15102142
84k15102142
add a comment |
add a comment |
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.
draft saved
draft discarded
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%2f54277385%2freact-with-typescript-how-to-access-hoc-methods-in-new-coponent%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
using HOC is batter then inheritance because of the nature of the React ecosystem - then this HOC doesn't make it any better because it still uses inheritance.
– estus
Jan 20 at 14:26