Skip to content

Commit 8b3cae1

Browse files
docschina-botdocschina-bot
committed
docs(en): merging all conflicts
2 parents 8bffb46 + 64beb65 commit 8b3cae1

23 files changed

+2401
-71
lines changed

‎src/components/MDX/ConsoleBlock.tsx

Lines changed: 78 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
1515
children: React.ReactNode;
1616
}
1717

18+
interface ConsoleBlockMultiProps {
19+
children: React.ReactNode;
20+
}
21+
1822
const Box = ({
1923
width = '60px',
2024
height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
2933
<div className={className} style={{width, height, ...customStyles}}></div>
3034
);
3135

32-
function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
36+
export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3337
let message: React.ReactNode | null;
3438
if (typeof children === 'string') {
3539
message = children;
@@ -38,7 +42,10 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3842
}
3943

4044
return (
41-
<div className="mb-4 text-secondary" translate="no" dir="ltr">
45+
<div
46+
className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
47+
translate="no"
48+
dir="ltr">
4249
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
4350
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
4451
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -73,4 +80,72 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
7380
);
7481
}
7582

76-
export default ConsoleBlock;
83+
export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
84+
return (
85+
<div
86+
className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
87+
translate="no"
88+
dir="ltr">
89+
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
90+
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
91+
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
92+
</div>
93+
<div className="flex text-sm px-4">
94+
<div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
95+
Console
96+
</div>
97+
<div className="px-4 py-2 flex">
98+
<Box className="me-2 bg-gray-300 dark:bg-gray-70" />
99+
<Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
100+
<Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
101+
</div>
102+
</div>
103+
</div>
104+
<div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
105+
{children}
106+
</div>
107+
</div>
108+
);
109+
}
110+
111+
export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
112+
let message: React.ReactNode | null;
113+
if (typeof children === 'string') {
114+
message = children;
115+
} else if (isValidElement(children)) {
116+
message = children.props.children;
117+
} else if (Array.isArray(children)) {
118+
message = children.reduce((result, child) => {
119+
if (typeof child === 'string') {
120+
result += child;
121+
} else if (isValidElement(child)) {
122+
// @ts-ignore
123+
result += child.props.children;
124+
}
125+
return result;
126+
}, '');
127+
}
128+
129+
return (
130+
<div
131+
className={cn(
132+
'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
133+
{
134+
'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
135+
level === 'error',
136+
'bg-yellow-5 text-yellow-50': level === 'warning',
137+
'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
138+
}
139+
)}>
140+
{level === 'error' && (
141+
<IconError className="self-start mt-1.5 text-[.7rem] w-6" />
142+
)}
143+
{level === 'warning' && (
144+
<IconWarning className="self-start mt-1 text-[.65rem] w-6" />
145+
)}
146+
<div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
147+
{message}
148+
</div>
149+
</div>
150+
);
151+
}

‎src/components/MDX/MDXComponents.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import cn from 'classnames';
88

99
import CodeBlock from './CodeBlock';
1010
import {CodeDiagram} from './CodeDiagram';
11-
import ConsoleBlock from './ConsoleBlock';
11+
import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
1212
import ExpandableCallout from './ExpandableCallout';
1313
import ExpandableExample from './ExpandableExample';
1414
import {H1, H2, H3, H4, H5} from './Heading';
@@ -420,6 +420,8 @@ export const MDXComponents = {
420420
pre: CodeBlock,
421421
CodeDiagram,
422422
ConsoleBlock,
423+
ConsoleBlockMulti,
424+
ConsoleLogLine,
423425
DeepDive: (props: {
424426
children: React.ReactNode;
425427
title: string;

‎src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,11 @@ JavaScript 是一个因其松散规则和动态特性而闻名的具有挑战性
5252
</form>
5353
```
5454

55+
<<<<<<< HEAD
5556
`action` 函数可以同步或异步执行。你可以在客户端使用标准 JavaScript 定义它们，也可以在服务器上使用 [`'use server'`](/reference/react/use-server) 指示符。当使用 action 时，React 将帮助管理数据提交的生命周期，提供类似 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 和 [`useFormState`](/reference/react-dom/hooks/useFormState) 的 Hook，以访问表单操作的当前 state 与响应。
57+
=======
58+
The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the [`'use server'`](/reference/react/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action.
59+
>>>>>>> 64beb657a2c3c0b102862509ebb8cf599f7cafd5
5660
5761
默认情况下，Action 在 [transition](/reference/react/useTransition) 中提交，使当前页面在操作处理过程中保持交互性。由于 Action 支持异步函数，我们还添加了在 transitions 中使用 `async/await` 的功能，这允许在异步请求（如 `fetch`）开始时使用转换的 `isPending` 状态显示待处理 UI，并在应用更新时始终显示待处理 UI。
5862

@@ -78,7 +82,11 @@ React 服务器组件、资源加载、文档元数据与 Action 都已经加入
7882

7983
- **资源加载**：我们将 Suspense 与样式表、字体和脚本等资源的加载生命周期集成在一起，以便 React 考虑它们来确定像 [`<style>`](/reference/react-dom/components/style)、[`<link>`](/reference/react-dom/components/link) 和 [`<script>`](/reference/react-dom/components/script) 这样的元素中的内容是否已准备就绪。我们还添加了新的 [资源加载 API](/reference/react-dom#resource-preloading-apis)，如 `preload` 和 `preinit`，以提供更大的控制权，指示何时应加载和初始化资源。
8084

85+
<<<<<<< HEAD
8186
- **Action**：如上所述，我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中，使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态，使用 [`useFormState`](/reference/react-dom/hooks/useFormState) 处理结果，并使用 [`useOptimistic`](/reference/react/useOptimistic) 乐观地更新 UI。
87+
=======
88+
- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
89+
>>>>>>> 64beb657a2c3c0b102862509ebb8cf599f7cafd5
8290
8391
由于所有这些功能是相互配合的，因此单独在稳定渠道中发布它们是困难的。发布 Action 而不带有用于访问表单状态的补充 Hook 会限制 Action 的实际可用性。引入 React 服务器组件而不集成 Server Action 会把在服务器上修改数据变得复杂化。
8492

0 commit comments

Comments
 (0)