Javascript 理解'const getLayout=Component.getLayout | |（第页=>；页）`

我正在通读这篇文章，我开始迷失在“选项3”的语法中

代码如下：

// /pages/account-settings/basic-information.js
import AccountSettingsLayout from '../../components/AccountSettingsLayout'

const AccountSettingsBasicInformation = () => <div>{/* ... */}</div>

AccountSettingsBasicInformation.layout = AccountSettingsLayout

export default AccountSettingsBasicInformation

// /pages/_app_.js
import React from 'react'
import App from 'next/app'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    const Layout = Component.layout || (children => <>{children}</>)

    return (
      <Layout>
        <Component {...pageProps}></Component>
      </Layout>
    )
  }
}

export default MyApp

///pages/account settings/basic-information.js
从“../../components/AccountSettingsLayout”导入AccountSettingsLayout
const AccountSettingsBasicInformation=（）=>{/*…*/}
AccountSettingsBasicInformation.layout=AccountSettingsLayout
导出默认帐户设置基本信息
///pages/\u app\ujs
从“React”导入React
从“下一个/应用程序”导入应用程序
类MyApp扩展了应用程序{
render（）{
const{Component，pageProps}=this.props
const Layout=Component.Layout | |（children=>{children}）
返回(
)
}
}
导出默认MyApp

我很难理解的部分是

constlayout=Component.Layout | | |（children=>{children}）

。我知道

|

意味着它将执行这两个部分，但我不知道将分配什么

布局

然后在“选项4”中，它与行
const getLayout=Component.getLayout | |（page=>page）

我知道
page=>{/*这里的某物*/}
是一个函数，但是
（page=>page）
对我来说没有意义。
我认为选项3中有一个输入错误，应该是
（{children}）=>{children}
，因为它声明了一个匿名组件并呈现了
children prop
属性

const Layout = Component.layout || (({ children }) => <>{children}</>);

仅当布尔表达式的前半部分计算结果为false时，它才会计算后半部分，即它继续处理表达式以查找任何真实的部分。Javascript在布尔表达式中使用短路逻辑，即在一系列逻辑OR中，一旦找到truthy值，就会跳过其余表达式。类似地，对于一系列逻辑AND（
&&
），一旦找到一个假值，则跳过其余值并返回假值

在选项4中，
getLayout
是一个接受JSX文本并返回它的函数。回退只是这个函数的最简单版本，使用
页面
JSX文本并返回它，而不需要任何额外的布局包装/样式设置等

// set the function
const getLayout = Component.getLayout || (page => page); 

// invoke function and render return value
return getLayout(<Component {...pageProps}></Component>); 

//设置函数
const getLayout=Component.getLayout | |（page=>page）；
//调用函数并呈现返回值
返回getLayout（）；
我做了一次跟进，以便更好地了解战略的实施情况。。。希望您的反馈@金融科医生正在看一看。
// set the function
const getLayout = Component.getLayout || (page => page); 

// invoke function and render return value
return getLayout(<Component {...pageProps}></Component>);