简单测试记录上下文

This commit is contained in:
maofeng 2025-06-19 22:42:13 +08:00
parent 02b54e1cda
commit c336615c68

View File

@ -1,8 +1,8 @@
import "./App.css"; import "./App.css";
import { RecordProvider, useNamedRecord, useRecord } from "./core/record"; import { RecordContextProvider, useRecordContext } from "./core/record";
function Consumer({ name }: { name: string }) { function Consumer({ name }: { name: string }) {
const record = useNamedRecord<{ text: string }>(name); const record = useRecordContext<{ text: string }>(name);
return ( return (
<div <div
style={{ style={{
@ -20,7 +20,7 @@ function Consumer({ name }: { name: string }) {
} }
function RecordConsumer() { function RecordConsumer() {
const record = useRecord<{ text: string }>(); const record = useRecordContext<{ text: string }>();
return ( return (
<div <div
style={{ style={{
@ -42,16 +42,16 @@ const App = () => {
<div className="content"> <div className="content">
<h1>Rsbuild with React</h1> <h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p> <p>Start building amazing things with Rsbuild.</p>
<RecordProvider name="a" value={{ text: "aaa Rsbuild message" }}> <RecordContextProvider name="a" value={{ text: "aaa Rsbuild message" }}>
<RecordProvider name="av" value={{ text: "vvv with Rsbuild" }}> <RecordContextProvider name="av" value={{ text: "vvv with Rsbuild" }}>
<Consumer name="av" /> <Consumer name="av" />
<Consumer name="a" /> <Consumer name="a" />
<RecordConsumer /> <RecordConsumer />
</RecordProvider> </RecordContextProvider>
<Consumer name="a" /> <Consumer name="a" />
<Consumer name="x" /> <Consumer name="x" />
<RecordConsumer /> <RecordConsumer />
</RecordProvider> </RecordContextProvider>
</div> </div>
); );
}; };