Docusaurus 客户端 API
Docusaurus 提供了一些客户端 API,帮助你搭建网站。
Components
<ErrorBoundary />
This component creates a React error boundary.
用它来包裹可能抛出错误的组件,并在发生这种情况时显示备用界面,而不会让整个应用崩溃。
import React from 'react';
import ErrorBoundary from '@docusaurus/ErrorBoundary';
const SafeComponent = () => (
<ErrorBoundary
fallback={({error, tryAgain}) => (
<div>
<p>This component crashed because of error: {error.message}.</p>
<button onClick={tryAgain}>Try Again!</button>
</div>
)}>
<SomeDangerousComponentThatMayThrow />
</ErrorBoundary>
);
提示
To see it in action, click here:
信息
Docusaurus 用这个组件来捕捉主题布局中以及整个应用中的错误。
备注
这个组件不会捕捉构建时抛出的错误,只会保护有状态的 React 组件在客户端渲染时可能发生的错误。
Props
fallback
: an optional render callback returning a JSX element. It will receive an object with 2 attributes:error
, the error that was caught, andtryAgain
, a function (() => void
) callback to reset the error in the component and try rendering it again. If not present,@theme/Error
will be rendered instead.@theme/Error
is used for the error boundaries wrapping the site, above the layout.
warning
The fallback
prop is a callback, and not a React functional component. 你不能在这个回调中使用 React 钩子。
<Head/>
此可复用的 React 组件将管理您向文档头做出的所有更改。 它接受纯 HTML 标签作为参数,输出也是纯 HTML 标签,且对新手友好。 It is a wrapper around React Helmet.
示例用法:
import React from 'react';
import Head from '@docusaurus/Head';
const MySEO = () => (
<Head>
<meta property="og:description" content="My custom description" />
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Head>
);
嵌套或之后使用的组件将覆盖先前使用的组件:
<Parent>
<Head>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Head>
<Child>
<Head>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Head>
</Child>
</Parent>
会输出:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</head>