kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-05-17 08:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate link component

Browse Source
This commit is contained in:
unix
2020-05-08 16:49:26 +08:00
parent bb1e7c40ca
commit 495cc55e05
33 changed files with 103 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/anchor/index.tsx
View File

@@ -23,9 +23,7 @@ const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({ children, pur
return (
<span className="parent" ref={ref}>
<Link pure href={`#${id}`}>
{children}
</Link>
<Link href={`#${id}`}>{children}</Link>
<span className="virtual" id={id} />
{!pure && (
<span className="icon">

4
lib/components/attributes/contributors.tsx
View File

@@ -46,13 +46,13 @@ const Contributors: React.FC<Props> = ({ path }) => {
<div className="contributors">
{users.map((user, index) => (
<Tooltip text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
<Link color pure target="_blank" rel="nofollow" href={user.url}>
<Link color target="_blank" rel="nofollow" href={user.url}>
<Avatar src={user.avatar} />
</Link>
</Tooltip>
))}
<Tooltip text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'} type="dark">
<Link color pure target="_blank" rel="nofollow" href={link}>
<Link color target="_blank" rel="nofollow" href={link}>
<Avatar text="Add" />
</Link>
</Tooltip>

4
pages/en-us/components/badge.mdx
View File

@@ -71,12 +71,12 @@ Display an indicator that requires attention.
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
</Badge.Anchor>
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot style={{ padding: '7px' }} />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
</Badge.Anchor>
</>
`} />

6
pages/en-us/components/card.mdx
View File

@@ -78,14 +78,14 @@ A common container component.
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
</Row>
@@ -101,7 +101,7 @@ A common container component.
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>Modern and minimalist React UI library.</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
`} />

2
pages/en-us/components/code.mdx
View File

@@ -13,7 +13,7 @@ Show source code in a standardized way.
<Note>
Want to display <Code>shell</Code> code snippets?
Try <NextLink href="/en-us/components/snippet"><Link pure color>Snippet</Link></NextLink>.
Try <NextLink href="/en-us/components/snippet"><Link color>Snippet</Link></NextLink>.
</Note>
<Playground

28
pages/en-us/components/link.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Link, Text, Code } from 'components'
import { Link, Text, Code, Spacer } from 'components'
import NextLink from 'next/link'
export const meta = {
@@ -12,7 +12,6 @@ export const meta = {
Hyperlinks between pages.
<Playground
desc="The default component Link adds an icon to the link."
scope={{ Link }}
code={`
<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
@@ -26,15 +25,28 @@ Hyperlinks between pages.
<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
`} />
<Playground
title="With Icon"
desc="Show an icon in the link."
scope={{ Link, Spacer }}
code={`
<>
<Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
<Spacer y={.5} />
<Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
</>
`} />
<Playground
title="variant"
desc="Different styles of links."
scope={{ Link, Text }}
code={`
<>
<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
</>
`} />
@@ -44,7 +56,7 @@ Hyperlinks between pages.
desc="Display as a separate block."
scope={{ Link }}
code={`
<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
`} />
<Playground
@@ -53,7 +65,7 @@ Hyperlinks between pages.
scope={{ Link, NextLink }}
code={`
<NextLink href="/en-us/components/button">
<Link pure block>Docs of Button</Link>
<Link block>Docs of Button</Link>
</NextLink>
`} />
@@ -64,7 +76,7 @@ Hyperlinks between pages.
| ---------- | ---------- | ---- | -------------- | ------ |
| **href** | link url | `string` | - | - |
| **color** | display color for link | `boolean` | - | `false` |
| **pure** | hide icon | `boolean` | - | `false` |
| **icon** | show icon | `boolean` | - | `false` |
| **underline** | display underline | `boolean` | - | `false` |
| **block** | display as a separate block | `boolean` | - | `false` |
| ... | native props | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |

2
pages/en-us/components/modal.mdx
View File

@@ -14,7 +14,7 @@ Display popup content that requires attention or provides additional information
<Note>
Just want a text notification?
Try <NextLink href="/en-us/components/toast"><Link pure color>Toast component</Link></NextLink>.
Try <NextLink href="/en-us/components/toast"><Link color>Toast component</Link></NextLink>.
</Note>
<Playground

8
pages/en-us/components/popover.mdx
View File

@@ -17,9 +17,9 @@ The floating box popped by clicking or hovering.
() => {
const content = () => (
<div style={{ padding: '0 10px' }}>
<Link pure href="#">A hyperlink</Link>
<Link href="#">A hyperlink</Link>
<Spacer y={.5} />
<Link pure color href="#">External link</Link>
<Link color href="#">External link</Link>
</div>
)
return (
@@ -42,10 +42,10 @@ The floating box popped by clicking or hovering.
<span>User Settings</span>
</Popover.Item>
<Popover.Item>
<Link pure href="#">A hyperlink</Link>
<Link href="#">A hyperlink</Link>
</Popover.Item>
<Popover.Item>
<Link pure color href="#">A hyperlink for edit profile</Link>
<Link color href="#">A hyperlink for edit profile</Link>
</Popover.Item>
<Popover.Item line />
<Popover.Item>

2
pages/en-us/components/tooltip.mdx
View File

@@ -42,7 +42,7 @@ Displays additional information on hover.
</Tooltip>
<Spacer inline x={1} />
<Tooltip text={'Push to Git and your website is live.'} type="dark">
<Link href="#" color pure>Hyperlink</Link>
<Link href="#" color>Hyperlink</Link>
</Tooltip>
</Row>
`} />

2
pages/en-us/components/use-body-scroll.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
Disable scrolling behavior for body or any element, it is useful for displaying popup element or menus.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

2
pages/en-us/components/use-click-away.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
Detect if a click event happened outside of an element.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

2
pages/en-us/components/use-clipboard.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
Copy string to clipboard.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

4
pages/en-us/components/use-current-state.mdx
View File

@@ -13,9 +13,9 @@ can only get the value at render time, not the latest.
This is a small tool to get the latest value, It is very useful in async actions such as `setTimeout`.
if you like a bigger solution,
try <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
try <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

8
pages/en-us/guide/installation.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### Install package
<Note>
Ensure your have the latest version of <Link pure href="https://nodejs.org/en/download/">NodeJS</Link>,
and a package manager: <Link pure href="https://www.npmjs.com/">NPM</Link> or <Link pure href="https://yarnpkg.com/">Yarn</Link>.
Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
and a package manager: <Link href="https://www.npmjs.com/">NPM</Link> or <Link href="https://yarnpkg.com/">Yarn</Link>.
</Note>
<Spacer y={1} />
<Dot type="success" /> 1. Run script to download:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
### Create React App
A React project created by <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
A React project created by <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use.
We have <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
We have <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
sample project related to create react app here</Link>.

8
pages/en-us/guide/introduction.mdx
View File

@@ -11,8 +11,8 @@ export const meta = {
### Why @zeit-ui/react
`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">styles</Link>
originating from <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel's design</Link>.
`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">styles</Link>
originating from <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel's design</Link>.
The design of the **Vercel** is concise and aesthetic feeling, this is an important reason for popular of Vercel.
Now you can use them at will in React.
@@ -23,8 +23,8 @@ ZEIT UI is an unofficial organization, all our projects are open source.
### Contact
- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
- Welcome share your feedback and ideas. We also love PRs.
<Spacer y={3} />

6
pages/en-us/guide/server-render.mdx
View File

@@ -15,19 +15,19 @@ export const meta = {
All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
<Note label="readme">
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>a SPA application</Link>?
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>a SPA application</Link>?
It is recommended to skip this section.
</Note>
<Spacer y={.5} />
Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
Read <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
Read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
the post from the Next.js team</Link> to learn more.
<Text>In addition, for <Text b>server-side render</Text> and web applications,
we strongly recommend that you read this famous post
<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
7-principles-of-rich-web-applications
</Link> from <Text em>Guillermo Rauch</Text>.
</Text>

4
pages/en-us/guide/themes.mdx
View File

@@ -50,7 +50,7 @@ const App = () => {
Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
and all the components will change automatically.
Here is <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
Here is <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
@@ -94,7 +94,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
```
If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
<Spacer y={3} />

4
pages/zh-cn/components/badge.mdx
View File

@@ -71,12 +71,12 @@ export const meta = {
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
</Badge.Anchor>
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot style={{ padding: '7px' }} />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
</Badge.Anchor>
</>
`} />

6
pages/zh-cn/components/card.mdx
View File

@@ -82,14 +82,14 @@ export const meta = {
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
</Row>
@@ -105,7 +105,7 @@ export const meta = {
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>现代化、极简风格的 UI 库。</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
`} />

2
pages/zh-cn/components/code.mdx
View File

@@ -13,7 +13,7 @@ export const meta = {
<Note label="提示">
想要展示 <Code>Shell</Code> 代码片段或一个命令？
可以试试 <NextLink href="/zh-cn/components/snippet"><Link pure color>Snippet / 片段</Link></NextLink> 组件。
可以试试 <NextLink href="/zh-cn/components/snippet"><Link color>Snippet / 片段</Link></NextLink> 组件。
</Note>
<Playground

26
pages/zh-cn/components/link.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Link, Text, Code } from 'components'
import { Link, Text, Code, Spacer } from 'components'
import NextLink from 'next/link'
export const meta = {
@@ -32,10 +32,22 @@ export const meta = {
scope={{ Link, Text }}
code={`
<>
<Text><Link href="#" pure>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" color pure>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" pure underline>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#">严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
<Text><Link href="#" color>严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
<Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
</>
`} />
<Playground
title="图标"
desc="在链接中显示修饰图标。"
scope={{ Link, Spacer }}
code={`
<>
<Link href="#" icon>通过使用指南和教程来学习如何用 React</Link>
<Spacer y={.5} />
<Link href="#" icon color>通过使用指南和教程来学习如何用 React</Link>
</>
`} />
@@ -44,7 +56,7 @@ export const meta = {
desc="将链接单独作为一个块显示。"
scope={{ Link }}
code={`
<Link href="#" pure block>通过使用指南和教程来学习如何用 React</Link>
<Link href="#" block>请参阅转换成严格模式</Link>
`} />
<Playground
@@ -53,7 +65,7 @@ export const meta = {
scope={{ Link, NextLink }}
code={`
<NextLink href="/zh-cn/components/button">
<Link pure block>Docs of Button</Link>
<Link block>浏览更多文档</Link>
</NextLink>
`} />
@@ -64,7 +76,7 @@ export const meta = {
| ---------- | ---------- | ---- | -------------- | ------ |
| **href** | 链接地址 | `string` | - | - |
| **color** | 是否高亮显示 | `boolean` | - | `false` |
| **pure** | 隐藏图标，仅显示文本 | `boolean` | - | `false` |
| **icon** | 在文本后显示图标 | `boolean` | - | `false` |
| **underline** | 显示下划线 | `boolean` | - | `false` |
| **block** | 是否以块的方式显示链接 | `boolean` | - | `false` |
| ... | 原生属性 | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |

2
pages/zh-cn/components/modal.mdx
View File

@@ -14,7 +14,7 @@ export const meta = {
<Note>
仅仅需要弹出文本信息？
试试 <NextLink href="/zh-cn/components/toast"><Link pure color>Toast / 通知</Link></NextLink> 组件。
试试 <NextLink href="/zh-cn/components/toast"><Link color>Toast / 通知</Link></NextLink> 组件。
</Note>
<Playground

8
pages/zh-cn/components/popover.mdx
View File

@@ -18,9 +18,9 @@ export const meta = {
() => {
const content = () => (
<div style={{ padding: '0 10px' }}>
<Link pure href="#">一个超链接</Link>
<Link href="#">一个超链接</Link>
<Spacer y={.5} />
<Link pure color href="#">外部链接</Link>
<Link color href="#">外部链接</Link>
</div>
)
return (
@@ -43,10 +43,10 @@ export const meta = {
<span>用户设置</span>
</Popover.Item>
<Popover.Item>
<Link pure href="#">一个超链接</Link>
<Link href="#">一个超链接</Link>
</Popover.Item>
<Popover.Item>
<Link pure color href="#">前往修改用户配置</Link>
<Link color href="#">前往修改用户配置</Link>
</Popover.Item>
<Popover.Item line />
<Popover.Item>

2
pages/zh-cn/components/tabs.mdx
View File

@@ -41,7 +41,7 @@ export const meta = {
<Tabs initialValue="1">
<Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
<Text>你好，这是我们在 Twitch 的最新直播。</Text>
<Link href="https://github.com/zeit-ui/react" pure color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
<Link href="https://github.com/zeit-ui/react" color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
</Tabs.Item>
<Tabs.Item label={<><TwitterIcon /> Twitter </>} value="2">
<Text>这个组件看起来还不错。</Text>

2
pages/zh-cn/components/tooltip.mdx
View File

@@ -42,7 +42,7 @@ export const meta = {
</Tooltip>
<Spacer inline x={1} />
<Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
<Link href="#" color pure>超链接</Link>
<Link href="#" color>超链接</Link>
</Tooltip>
</Row>
`} />

2
pages/zh-cn/components/use-body-scroll.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

2
pages/zh-cn/components/use-click-away.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
检测点击事件是否在元素之外。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

2
pages/zh-cn/components/use-clipboard.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
拷贝字符串到剪切板。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

4
pages/zh-cn/components/use-current-state.mdx
View File

@@ -11,9 +11,9 @@ export const meta = {
在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。
这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，
请试试 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
请试试 <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

8
pages/zh-cn/guide/installation.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### 从包管理器安装
<Note>
请确认你的 <Link pure href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
同时还需要准备包管理器: <Link pure href="https://www.npmjs.com/">NPM</Link> 或是 <Link pure href="https://yarnpkg.com/">Yarn</Link>.
请确认你的 <Link href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
同时还需要准备包管理器: <Link href="https://www.npmjs.com/">NPM</Link> 或是 <Link href="https://yarnpkg.com/">Yarn</Link>.
</Note>
<Spacer y={1} />
<Dot type="success" /> 1. 运行命令下载包:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
### 使用 Create React App
使用 <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
使用 <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
你不需要做任何改变，只需要引入组件库即可。
我们准备了 <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。
我们准备了 <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。

8
pages/zh-cn/guide/introduction.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### 什么是 ZEIT UI - React
`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
灵感来自于 <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel 的设计稿</Link>。
`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
灵感来自于 <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel 的设计稿</Link>。
Vercel 的设计非常简洁美观，且有浓厚的 Geek 风格，这是 Vercel 如此受欢迎的重要原因，现在你可以在 React 中随意使用所有设计元素。
@@ -23,8 +23,8 @@ ZEIT UI 是非官方的组织，且所有项目都是开源的。
### 联系我们
- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
- 我们非常欢迎来自任何人有趣的想法或反馈，也欢迎你贡献代码。
<Spacer y={3} />

6
pages/zh-cn/guide/server-render.mdx
View File

@@ -15,19 +15,19 @@ export const meta = {
`@zeit-ui/react` 的所有组件都能完美的适应 **服务端渲染**，实际上，你现在所见的文档站点就是来自服务端渲染。
<Note label="阅读提示">
如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>一个 SPA 应用</Link>，
如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>一个 SPA 应用</Link>，
建议跳过此章节。
</Note>
<Spacer y={.5} />
使用服务端渲染会让我们的应用失去 SPA 的所有优势吗？或许你可以考虑 `hybrid render` (混合渲染) 的应用，
阅读 <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
阅读 <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
这篇来自 Next.js 团队的文章</Link> 了解更多细节。
<Text>除此之外，关于 <Text b>服务端渲染</Text> 和 Web 应用的细节考量，
我们强烈推荐你阅读这篇来自 <Text em>Guillermo Rauch</Text> 的著名博文：
<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
构建 Web 应用的 7 原则
</Link>。
</Text>

4
pages/zh-cn/guide/themes.mdx
View File

@@ -50,7 +50,7 @@ const App = () => {
### 自定义主题
自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。
这里有 <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
这里有 <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
当然，如果一个组件未使用到你自定义的变量，它不会发生任何变化也不会重新渲染。
@@ -95,7 +95,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
```
如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
<Spacer y={3} />