0

因此，我正在根据Adam Wathan 的方法和他的 tailwlind 网站在我的下一个应用程序中开发布局系统。我让它适用于js文件，但看不到在 mdx 文件中执行它的语法。

它的工作方式是使用_app.js这样的：

import '../styles/tailwind.css'
import { useState, useEffect, Fragment } from 'react'
import Head from 'next/head'

function MyApp({ Component, pageProps, router }) {

  const Layout = Component.layoutProps?.Layout || Fragment
  const layoutProps = Component.layoutProps?.Layout
    ? { layoutProps: Component.layoutProps}
    : {};

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

export default MyApp

然后，在我的 js 文件中，我可以这样做：

import React from 'react'
import { DocumentationLayout } from 'src/layouts/DocumentationLayout'
import Link from 'next/link'

export default function DocsLandingPage() {
  return (
    <div>
      docs landing page
    </div>
  )
}

DocsLandingPage.layoutProps = {
  meta: {
    title: 'Documentation',
  },
  Layout: DocumentationLayout,
}

我设置layoutProps为适当的布局，然后 js 页面将应用该布局。

我的问题是，如果我有这样的 mdx 文件，（我相信）我有正确的导入语法来获取布局组件，但我不知道如何将它作为类似于我正在做的道具传递它来自我的 js 文件。有什么想法吗？


import { DocumentationLayout as _Layout } from 'src/layouts/DocumentationLayout'

install instructions tbd

***SOME KIND OF PROPS ASSIGNMENT HERE***
4

1 回答 1

0

something like this seems to do the trick

export default ({ children }) => <DocumentationLayout children={children}></DocumentationLayout>
于 2020-11-26T16:00:18.517 回答