C✳CODEZ.WIN
🌐 हिन्दी

स्थानीयकृत पठन मार्गदर्शिका

react-flow-node-tsउद्देश्य, उपयोग और स्रोत

TypeScript टाइप, हैंडल और Zustand इंटीग्रेशन के साथ React Flow नोड कंपोनेंट बनाएं। React Flow कैनवास के लिए कस्टम नोड बनाते समय, विज़ुअल वर्कफ़्लो एडिटर बनाते समय या नोड-आधारित UI कंपोनेंट लागू करते समय इसका उपयोग करें।

स्रोत प्राप्त किया गया:

स्रोत रिपॉज़िटरी
microsoft/skills
SKILL.md
.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
रिपॉज़िटरी Star
3,157
रिपॉज़िटरी का अंतिम अपडेट
2026-10-31
क्षमता वर्गीकरण
क्लाउड सेवाएं
अंतिम संग्रह समय

लाइसेंस: MIT

वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।

नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।

यह कौशल क्या करता है

TypeScript टाइप, हैंडल और Zustand इंटीग्रेशन के साथ React Flow नोड कंपोनेंट बनाएं। React Flow कैनवास के लिए कस्टम नोड बनाते समय, विज़ुअल वर्कफ़्लो एडिटर बनाते समय या नोड-आधारित UI कंपोनेंट लागू करते समय इसका उपयोग करें।

अपस्ट्रीम वर्कफ़्लो कैसे काम करता है

त्वरित शुरुआत

assets/ से टेम्प्लेट कॉपी करें और प्लेसहोल्डर्स को बदलें:{{NodeName}}→ पास्कलकेस घटक का नाम (उदाहरण के लिए,VideoNode){{nodeType}}→ कबाब-केस प्रकार पहचानकर्ता (उदाहरण के लिए,video-node){{NodeData}}→ डेटा इंटरफ़ेस नाम (उदाहरण के लिए,VideoNodeData)

ऊपर की ओर मार्ग · L14 ↗

एकीकरण चरण

प्रकार जोड़ेंsrc/frontend/src/types/index.tsघटक बनाएंsrc/frontend/src/components/nodes/से निर्यात करेंsrc/frontend/src/components/nodes/index.tsडिफ़ॉल्ट मान जोड़ेंsrc/frontend/src/store/app-store.ts

ऊपर की ओर मार्ग · L63 ↗

रिएक्ट फ्लो नोड

स्थापित पैटर्न का पालन करते हुए, उचित टाइपस्क्रिप्ट प्रकारों और स्टोर एकीकरण के साथ रिएक्ट फ्लो नोड कंपोनेंट बनाएं।

ऊपर की ओर मार्ग · L10 ↗
ऊपर की ओर मार्ग · typescript ↗
export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

आवश्यकताएँ और सेटअप

इस फ़ाइल से कोई संक्षिप्त आवश्यकताएँ नहीं चुनी गईं। इसका मतलब यह नहीं है कि स्किल की कोई निर्भरता नहीं है। रिपॉजिटरी सेटअप निर्देशों और संदर्भित फ़ाइलों की जाँच करें।

सीमाएं और गुणवत्ता जांच

इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।

सुरक्षित परीक्षण से शुरुआत करें

  1. समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
  2. एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
  3. डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
  4. स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।

कौशल प्रारूप और निर्देशिका विनिर्देश ↗

मूल लेख में आगे पढ़ें

अनुवाद और दायरा

यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।

यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।

पिन किया गया स्रोत
मूल लेख पढ़ें ↗
स्रोत प्राप्त किया गया
स्रोत कमिट
00d66a64919edca5bca2c673373444e36a4b5461
स्रोत SHA-256
f0a4f37df3e8e7ed9645e947c08470fd78483f18b9587ae8cd20720022110781
संपूर्ण कौशल सूची पर वापस जाएँ