理解`const getLayout = Component.getLayout || （页面=>页面）`

Question

我正在阅读 this 文章，但我开始迷失在“选项 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

我很难理解的部分是 const Layout = Component.layout || (children => <>{children}</>)。我知道 || 意味着它将执行两个部分，但我不知道 Layout 会被分配什么。

然后在“选项 4”中，const getLayout = Component.getLayout || (page => page)

行变得更加混乱

我知道 page => {/*something here*/} 是一个函数，但 (page => page) 对我来说没有意义。

Answer 1

我认为选项 3 中有错字，应该是 ({ children }) => <>{children}</>，因为它声明了一个匿名组件并呈现了 children 属性。

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

这里发生的是逻辑 OR (||) 提供了一个回退值以分配给 Layout，稍后在 JSX 中将其视为 React 组件：

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

如果布尔表达式的前半部分计算结果为假，它只会计算后半部分，即它会继续处理表达式以找到任何为真的部分。 Javascript 在布尔表达式中使用短路逻辑，即在一系列逻辑或中，一旦找到真值，它就会跳过其余的表达式。与一系列逻辑 AND (&&) 类似，一旦发现错误值，其余部分将被跳过并返回 false。

对于选项 4，getLayout 是一个接受 JSX 文字和 returns 的函数。回退只是这个函数的最简单版本，使用 page JSX 文字并在没有任何额外布局的情况下返回它 wrappers/styling/etc..

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

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

理解`const getLayout = Component.getLayout || （页面=>页面）`

Understanding `const getLayout = Component.getLayout || (page => page)`

javascript

syntax

reactjs