React组件props设置默认属性

最新推荐文章于 2024-01-04 20:46:00 发布

YaaLee_

最新推荐文章于 2024-01-04 20:46:00 发布

阅读量1.2k

点赞数 2

分类专栏： React 文章标签： react props

本文链接：https://blog.csdn.net/yrqlyq/article/details/119849963

版权

React 专栏收录该内容

38 篇文章 4 订阅

订阅专栏

这篇博客介绍了在React中为组件设置默认props的两种方式：一是通过静态属性`defaultProps`，二是直接在组件类内部定义`defaultProps`。这两种方法都能确保组件在接收到未定义的props时使用预设的默认值，从而增强代码的健壮性。示例代码展示了一个名为`LayOut`的组件，如何设置`isShowBack`的默认值为`true`。

摘要由CSDN通过智能技术生成

1、通过静态属性设置props默认值

class LayOut extends Component {
    // 通过静态属性设置props默认值
    static defaultProps =  {
        isShowBack: true
    }
    render() {
        const { title, children, isSHowFooter, isShowBack } = this.props
        return (
            <div className="layout">
                <header>
                    <Header title = { title } isShowBack = { isShowBack }/>
                </header>
                <main>
                    { children }
                </main>
                {
                    isSHowFooter? <footer>
                        第三方登陆
                    </footer>: ""
                }
                
            </div>
        )
    }
}
export default LayOut

2、通过设置props默认属性

// 设置props默认属性 
LayOut.defaultProps = {
	isShowBack: true
}
class LayOut extends Component {
    render() {
        const { title, children, isSHowFooter, isShowBack } = this.props
        return (
            <div className="layout">
                <header>
                    <Header title = { title } isShowBack = { isShowBack }/>
                </header>
                <main>
                    { children }
                </main>
                {
                    isSHowFooter? <footer>
                        第三方登陆
                    </footer>: ""
                }
                
            </div>
        )
    }
}
export default LayOut