Tarjima qoshish uchun havola boyicha o'tib Pull Request oching (havolaga o'tish).
Standart til uchun tarkibni ko'rsatadi.
Gate is a hook for conditional rendering, based on the current value (or values) in props. It can solve problems such as compiling all required data when a component mounts, or showing an alternative component if there is insufficient data in props. Gate is also useful for routing or animations, similar to ReactTransitionGroup.
This enables the creation of a feedback loop by sending props back to a Store.
Gate can be integrated via the useGate hook or as a component with props. Gate stores and events function as standard units within an application.
Gate has two potential states:
- Opened, indicating the component is mounted.
- Closed, indicating the component is unmounted.
Example of using Gate as a component:
<Gate history={history} />
Properties
.state
Store
Do not modify the state
value! It is a derived store and should remain in a predictable state.
Store<Props>
: DerivedStore containing the current state of the gate. This state derives from the second argument of useGate and from props when rendering the gate as a component.
Example
import {createGate, useGate} from 'effector-react';
const Gate = createGate();
Gate.state.watch((state) => console.info("gate state updated", state));
function App() {
useGate(Gate, { props: "yep" });
return <div>Example</div>;
}
ReactDOM.render(<App />, root);
// => gate state updated { props: "yep" }
.open
Event
Do not manually invoke this event. It is an event that is triggered based on the gate’s state.
Event
.close
Event
Do not manually invoke this event. It is an event that is triggered based on the gate’s state.
Event
.status
Store
Do not modify the status
value! It is a derived store and should remain in a predictable state.
Store
Example
import {createGate, useGate} from 'effector-react';
const Gate = createGate();
Gate.status.watch((opened) => console.info("is Gate opened?", opened));
// => is Gate opened? false
function App() {
useGate(Gate);
return <div>Example</div>;
}
ReactDOM.render(<App />, root);
// => is Gate opened? true
Ingliz tilidagi hujjatlar eng dolzarb hisoblanadi, chunki u effector guruhi tomonidan yozilgan va yangilanadi. Hujjatlarni boshqa tillarga tarjima qilish jamiyat tomonidan kuch va istaklar mavjud bo'lganda amalga oshiriladi.
Esda tutingki, tarjima qilingan maqolalar yangilanmasligi mumkin, shuning uchun eng aniq va dolzarb ma'lumot uchun hujjatlarning asl inglizcha versiyasidan foydalanishni tavsiya etamiz.