JSX-elementtyp har inga konstruktions- eller anropssignaturer. Typescript
Om compose används finns ett fel JSX element type ‘Option’ does not have any construct or call signatures. 'redux'-version - 3.7.2
import * as React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
const { connect: fela, withTheme } = require('react-fela');
const Option = compose(
...[
connect(null,
dispatch => ({
onClick: (name) => dispatch(setActive(name)),
})),
fela({
option: ({ theme }) => ({
...getControlOptionColors(theme),
}),
}),
],
)(withTheme(({ label, name, onClick, styles }) => (
<div className={styles.option} onClick={onClick.bind(this, name)}>{label}</div>
)));
export class Test extends React.PureComponent<any, any> {
private renderOptions(options) {
return (
<div className={this.props.styles.options}>
{options.map(option => (
<div key={option.value}>
<Option
label={option.label}
name={option.value}
/>
</div>
))}
</div>
);
}
public render() {
const { options } = this.props;
return (
<div className={this.props.styles.container}>
{this.renderOptions(options)}
</div>
);
}
}
export default Controls;
Utan compose fungerar allt bra.
const Element = withTheme(({ label, name, onClick, styles }) => (
<div className={styles.option} onClick={onClick.bind(this, name)}>{label}</div>
))
const conponentWithConnect = connect(null,
dispatch => ({
onClick: (name) => dispatch(setActive(name)),
}))(Element);
const Option = fela({
option: ({ theme }) => ({
...getControlOptionColors(theme),
}),
})(withConnect)
Svar #1
Du behöver typkonvertera komponenten som returneras av compose till React.ComponentType och det fungerar bra. Så:
compose(...)(SomeComponent) as React.ComponentType
Svar #2
Ett uppdaterat svar; använd generiska för compose:
import React, { ComponentType, FC } from 'react';
export default compose<ComponentType>(
withWidth,
connect(
mapStateToProps,
mapDispatchToProps
)
)(Search)
