TypeError: Cannot read property 'withFooter' of null

Question

我正在尝试在 React TypeScript 中创建布局元素。我正在尝试使用一个布尔值道具来确定是否渲染页脚。不幸的是，我遇到了 cannot read 属性 of undefined 问题。我还想为 prop 类型设置一个默认的真值。我是新手，仍在努力学习来龙去脉。

import React, { Component } from 'react'
import Scrollbar from 'react-smooth-scrollbar'
import Header from '../Header/index'
import Footer from '../Footer/index'

type Props = {
    withFooter: boolean
}

class Layout extends Component<{}, Props> {
    render() {
        let footer
        if (this.state.withFooter) {
            footer = <Footer />
        } else {
            footer = null
        }

        return (
            <div>
                <Scrollbar>
                    <Header />
                    {this.props.children}
                    {footer}
                </Scrollbar>
            </div>
        );
    }
}

export default Layout

Answer 1

你能试试这个吗

type Props = {
    withFooter: boolean
}

class Layout extends Component<Props, {}> {
    public static defaultProps = {
         withFooter: true,
    };
    render() {
        let footer
        if (this.props.withFooter) {
            footer = <Footer />
        } else {
            footer = null
        }

        return (
            <div>
                <Scrollbar>
                    <Header />
                    {this.props.children}
                    {footer}
                </Scrollbar>
            </div>
        );
    }
}