Question

我有一个用typescript编写的反应组件PageLayout：

export interface IPageLayoutProps {...}
export interface IPageLayoutActions {...}
export interface IPageLayoutLocalState {...}

export default
class PageLayout<P extends IPageLayoutProps & IPageLayoutActions, S extends Object>
extends React.Component<P, S>
{
    render() {
        return (...)
    }
}

然后我尝试像这样扩展这个组件：

import PageLayout, { IPageLayoutProps, IPageLayoutActions, IPageLayoutLocalState } from './PageLayout'

export interface IPageLayoutSidebarProps {...}
export interface IPageLayoutSidebarActions {...}
interface IPageLayoutSidebarState {sidebarVisible: boolean}

export default
class PageLayoutSidebar<P extends IPageLayoutSidebarProps & IPageLayoutSidebarActions & IPageLayoutProps & IPageLayoutActions, S extends IPageLayoutSidebarState & IPageLayoutLocalState>
extends PageLayout<P, S>
{
    render() {
       return (...)
    }

    toggleSidebar(visible:boolean) {
        this.setState({
            ...this.state,
            sidebarVisible: visible
        })
    }
}

问题是我在尝试调用this.setState时遇到错误，它告诉我“扩展类型可能只能从对象类型创建”。任何人都知道状态可能有什么问题，为什么我不能使用扩展运算符呢？

Answer 1

尝试使用：

this.setState({sidebarVisible: visible})

反应扩展组件＆amp;打字稿泛型＆amp;的setState

1 个答案: