React ????? ?? ?????

Javascript?? ??? ??? ?? ?? ??? ?????.

??? ?? React? ??? ??? ???? ????

React ????? ?? ??? ???? ?????? ?? ???? React ?? ?? ???? ???? ? ?? ?? ?? ??? ???. ? ??? ????? ????? ??? ???? ??????. ? ????? Context? ??? ????? ???? ??? ???? ???? ???? ????? ???? ??? ???????.

??? ????? ??????

React Context? ?? ???? ???? props? ??? ?? ?? ?? ?? ??? ?? ???? ???? ??? ?????. React.createContext? ???? ???? ???? ??? ??? ?????. Provider ?? ??? ?? ???? Consumer ?? useContext ??? ??? ?? ?? ??? ?? ?? ???? ? ????.

???? ?? ??? ????.

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Theme: ${theme}`}</button>;
}

export default App;

? ??? ThemedButton? ??? ?? props? ????? ???? ??? ThemeContext.Provider?? ???? ?? ?? ???? ? ????.

? ??? ??? ???????

????? ????? ?? ????? ???? ?? ??? ??? ? ????. Context.Provider?? ???? ?? ???? ?? ????? ???? ?? ?? ??? ?? ??????. ??? ????????? ?? ?? ?? ??? ????? ?? ???? ? ????.

?? ?? ????? ???? ??? ??? ??? ?? ?? ?? ????? ???? ??? ?????. ? ?? ??? ??? ???? ? ??? ?? ?? ?? ??? ???? ???? ?? ?????.

?? ??? ??

Radix Primitives? ?? ??????? ???? ?? ?? ?? ?? ??? ??? ????? ??????. ??? ?? ??? ????? Context? ???? ??? ?? ??? ???? ??? ????. ??? ??? ?? ??? ?? ???? ??? ???? ???? ??? ??? ? ????.

?? ?????? ?

Radix Primitives? ?? ??? ?? ??? ???? ?? ?? ???? ?? API? ?????. ?? ??? ????.

<AlertDialog.Root>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Content>
      <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
    </Dialog.Content>
  </Dialog.Root>

  <AlertDialog.Content />
</AlertDialog.Root>

??? ??? ???? ??? AlertDialog? AlertDialog ?? ??? ???? ?? ?? ??? ?? Dialog? ???? ?????. ?, AlertDialog.Root? Dialog.Root??? DialogContext? AlertDialogContext? ?? ?????.

? ????? AlertDialog.Trigger(Dialog.Trigger??? ?)? useContext(DialogContext)? ?? ??? ????? ???? AlertDialog.Root ?? Dialog.Root? ????? ?? ? ????. ????? AlertDialog.Trigger? ???? ??? ?? ???? ?? Dialog.Content? ??? ? ????.

??? ??? ???? ???

??? ??? ???? ?? Radix Primitives? ??? ??? ????? ?????. ??? ??? ????? AlertDialog.Trigger? AlertDialog ???? ?? ???? ???? ??? ?? ???? ??? ????? ???? ??? ?????. ?? ????? ? ????? ???? ?? __scopeDialog? ?? ??? ?? ??? ?? Dialog ?? ??? ?????? ?????. ?? ?? Dialog ?? ??? useContext ???? ? ?? ????? ???? ??? ?????.

radix ui github ???? ?? ??:

https://github.com/radix-ui/primitives/blob/dae8ef4920b45f736e2574abf23676efab103645/packages/react/dialog/src/Dialog.tsx#L69

??? Radix UI?? ??? ??? ????? ???? ??? ???? ????.

1. ?? ??: createScope ????? ? ?? ?? ?? ?? ?? ??? ?? ??? ??????? ?????. ??? ?? ? ???? ??? ???? ?? ???? ??? ???? ????.
   

   import React, { createContext, useContext } from "react";
   
   const ThemeContext = createContext("light");
   
   function App() {
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
   
   function Toolbar() {
     return <ThemedButton />;
   }
   
   function ThemedButton() {
     const theme = useContext(ThemeContext);
     return <button>{`Theme: ${theme}`}</button>;
   }
   
   export default App;
   

2. ??? ??? ???: ????? ??? ? ??? ?????. ?? ???? ???? ??? ??????? ??????.
   

   <AlertDialog.Root>
     <Dialog.Root>
       <Dialog.Trigger />
       <Dialog.Content>
         <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
       </Dialog.Content>
     </Dialog.Root>
   
     <AlertDialog.Content />
   </AlertDialog.Root>
   

3. ??? ??: useDialogScope? ?? ?? ?? ??? ???? ??? ??? ?????? ?????? ?????.
   

   import { createScope } from '@radix-ui/react-context';
   
   const [createDialogContext, useDialogScope] = createScope('Dialog');
   

??? ??? ????? ??

• ???? ?? ??: ???? ??? ???? AlertDialog.Trigger? ?? ?? ??? ?? ???? ?? ??? ???? ?? ?? ????(AlertDialogContext)? ?? ? ????.

• ??? ??: ??? ??? ????? ?? ?? ??? ???? ???? ??? ? ???? ?? ??? ??? ? ????.

• ????: ???? ?? ?? ??? ???? ?? ?? ??(?: Dialog.Trigger)? ???? ? ????.

??? ???? ??

??? ????:

• AlertDialog.Root? ?? ??? ?? ??? ????? ??? ??? AlertDialogContext? ?????.

• ??? Dialog.Root? AlertDialog.Trigger? ?? ?? ??? ????? ????? ?? ?? ?????.

• ? ??? ??? ??? ?? ?? ?? ??? ???? ?? ?? ?? ???? ????? ???? Radix UI? ?? ?????.

????:

1. https://dev.to/romaintrotard/use-context-selector-demystified-4f8e

2. https://github.com/radix-ui/primitives

3. https://react.dev/reference/react/createContext

? ??? ?? ?? React? ??? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!