क्या एचटीएमएल पेज से एक प्रतिक्रिया घटक में डेटा पास करने का कोई सही तरीका है?

मेरे पास इस तरह एक प्रतिक्रिया ऐप है।क्या एचटीएमएल पेज से एक प्रतिक्रिया घटक में डेटा पास करने का कोई सही तरीका है?

var X = React.createClass({ 
    componentDidMount: function() { 
    fetch(this.props.feed).then(...); 
    } 
    render: function() { 
    return <div>{this.props.feed}</div> 
    } 
});

फ़ीड प्रोप का उपयोग घटक में जेएसओएन फ़ीड प्राप्त करने के लिए किया जाता है जो कि किसी विशेष ग्राहक के लिए अद्वितीय है।

यह parameterise करने के लिए HTML से मेरी प्रतिक्रिया एप्लिकेशन में डेटा पारित करने के लिए सुविधाजनक होगा:

<html> 
    <body> 
    <div id="app" feed='custom_feed.json'></div> 
    </body> 
</html

मेरे वर्तमान समाधान इस तरह दिखता है:

var root = document.getElementById('app'); 
var feed = root.getAttribute('feed') 
ReactDOM.render(<X feed={feed}/>, root);

यह स्पष्ट रूप से काम करता है, लेकिन यह महसूस करता है जैसे कि एक और बेवकूफ समाधान होना चाहिए। क्या ऐसा करने के लिए एक और अधिक सही तरीका है?

एचटीएमएल:

<div id="app" data-feed='custom_feed.json' data-someprop='value'></div>

जे एस:

var root = document.getElementById('app'); 
ReactDOM.render(<X {...(root.dataset)} />, root);

संपादित करें: demo fiddle

स्रोत

2016-04-11 superluminary

इस उपयोग के मामले का उद्देश्य क्या है? यदि यह HTML में "फ़ीड" का टेम्पलेट प्रतिपादन है, तो आपके पास सही टेम्पलेट के साथ आपके टेम्पलेट में ReactDOM.render हो सकता है। एक प्रतिक्रिया ऐप शुरू करने के लिए डीओएम पैरामीटर का उपयोग करना बहुत असामान्य है और वास्तव में अनुशंसित नहीं है। मुझे नहीं लगता कि इसे करने का एक आसान तरीका भी है। – Mijamo

मैं अपने ऐप को एसपीए में बदलने के लिए तैयार नहीं हूं। मेरा एचटीएमएल एक रूबी स्क्रिप्ट के साथ उत्पन्न होता है। प्रतिक्रिया घटक वास्तव में एक स्थिर पृष्ठ का एक छोटा सा हिस्सा है। कोणीय में मैं पृष्ठ पर '' ड्रॉप कर सकता था। मुझे स्पष्ट रूप से इस बारे में गलत तरीके से गलत बताया जा रहा है। – superluminary

Django से यहां आया, इसी तरह के उपयोग के मामले – binithb

मैं विभिन्न रंगमंच की सामग्री के लिए data- विशेषताओं का इस्तेमाल किया है, तो सभी {...dataset} destructuring का उपयोग कर रंगमंच की सामग्री, उदाहरण के लिए पारित कर दिया

स्रोत

2016-04-11 10:03:26 pawel

यह अच्छा है, लेकिन यह कैसे प्राप्त करने के लिए अलग है? – superluminary

1. अमान्य विशेषताओं का आविष्कार करने के बजाय 'डेटा-' विशेषताओं का उपयोग इस उद्देश्य के लिए किया जाना है, 2. आपको प्रत्येक अतिरिक्त प्रोप के लिए '.getAttribute' टाइप करने की आवश्यकता नहीं है, आप सभी में हैं 'dataset'। – pawel

लेकिन फिर आप केवल 'डेटासेट' के माध्यम से फ्लैट डेटा पास कर सकते हैं। अगर किसी को पूरी सरणी/ऑब्जेक्ट में पास करने की आवश्यकता है तो क्या होगा? – jayarjo

तुम सिर्फ अपने डेटा जब इतनी तरह घटक बढ़ते पारित कर सकते हैं:

<div id="root"></div> 
<script> 
    const data = { foo: 'bar' }; 
    ReactDOM.render(
     React.createElement(MyComponent, data), 
     document.getElementById('root') 
    ); 
</script>

स्रोत

2016-12-19 08:42:10

मैं एक ऐसी ही समस्या है, गतिशील पृष्ठों के सामान प्रतिक्रिया के लिए प्रासंगिक डेटा शामिल था।

मैं सिर्फ उन्हें वैश्विक क्षेत्र में घोषित ..

<script> 
    window.foobles = [12,453,12]; 
    window.bahs = ["bah", "bah", "black sheep"]; 
</script>

.. तो ..

ReactDOM.render(
    <Component 
    foobles={window.foobles} 
    bahs={window.bah} 
    />, 
    document.getElementById('app') 
)

जाहिर है, एक नेमस्पेसिंग दृष्टिकोण से, यह कुछ कमियां :)

स्रोत

2017-08-18 05:36:50 Sp4cecat

हो सकता है

React Habitat एक ढांचा है जो इसे सुविधाजनक बनाता है यदि आप कुछ पुन: प्रयोज्य और विस्तार योग्य चाहते हैं।

आप रजिस्टर इस

containerBuilder.register(Feed).as('Feed')

तरह घटकों प्रतिक्रिया तब लक्ष्य प्रतिक्रिया पर्यावास किसी भी समय यह HTML में दिखाई अप इन तार होगा रंगमंच की सामग्री

<div data-component="Feed" data-prop-feed-src="/custom_feed.json">

के साथ इस तरह HTML में परिभाषित करते हैं।

प्रकटीकरण: मैं इस ढांचे के प्रमुख रखरखाव में से एक हूं।

स्रोत

2018-01-17 07:27:15 jennas

क्या एचटीएमएल पेज से एक प्रतिक्रिया घटक में डेटा पास करने का कोई सही तरीका है?

उत्तर

संबंधित मुद्दे