Question

如果使用compose，则会出现错误JSX element type ‘Option’ does not have any construct or call signatures. ＆＃39; Redux的＆＃39;版本 - 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;

没有撰写，一切正常。

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)

Answer 1

您需要将compose返回的组件类型转换为React.ComponentType，并且工作正常。所以：

compose(...)(SomeComponent) as React.ComponentType

Answer 2

最新答案；对compose使用泛型：

import React, { ComponentType, FC } from 'react';

export default compose<ComponentType>(
  withWidth,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Search)

Answer 3

问题可能是您将参数包装到数组中的compose中，然后使用扩展运算符（...）破坏了数组。

没有理由这样做，因为它在语义上等同于直接传递参数。这种构造还可能阻止TypeScript正确推断compose的类型参数。

您可以将compose通话改写为

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

这也许可以解决问题，但是我不确定，因为您提供的代码片段不足以让我对其进行测试。

JSX元素类型没有任何构造或调用签名。打字稿

3 个答案: