JSX के लिए ... पाश

Question

इस वस्तु को देखते हुए में:

lst socials = { 
    foo: 'http://foo' 
} 

मैं JSX में यह माध्यम से लूप करना चाहते हैं। यह काम करता है:

let socialLinks = [] 
let socialBar 
for (let social in socials) { 
    socialLinks.push(<li> 
        <a alt={social} href={socials[social]}>{ social }</a> 
        </li>) 
} 
if (socialLinks) { 
    socialBar = <div className='align-bottom text-center'> 
       <ul className='list-inline social-list mb24'> 
        {socialLinks} 
       </ul> 
       </div> 
} 

लेकिन इस (सामाजिक अपरिभाषित) नहीं करता है:

let socialBar 
if (socials) { 
    socialBar = <div className='align-bottom text-center'> 
       <ul className='list-inline social-list mb24'> 
        for(let social in socials) 
        {<li> 
        <a alt={social} href={socials[social]}>{ social }</a> // social is undefined 
        </li>} 
       </ul> 
       </div> 
} 

है क्या कारण social 2 उदाहरण में अपरिभाषित है? मुझे लगता है कि आंतरिक ब्रैकेट के साथ एक स्कोपिंग समस्या है लेकिन मैं इसे ठीक करने में सफल नहीं रहा हूं।

मैं वस्तु कुंजी के साथ एक forEach कर सकते हैं करते हैं और इस post में के रूप में है, लेकिन इतना मेरे काम कर उदाहरण से अलग नहीं है।

स्पष्ट होने के लिए - मैंने यह काम किया है, मैं बस अपने दूसरे उदाहरण में स्कोपिंग समस्या (या सिंटैक्स त्रुटि अगर) पर स्पष्ट होना चाहता हूं।

Answer 1

JSX सिर्फ चीनी कि React.createElement के समारोह कॉल है, जो आप के लिए डॉक्स पा सकते हैं का एक समूह के लिए transpiled हो जाता है की जरूरत है यहाँ: https://facebook.github.io/react/docs/top-level-api.html#react.createelement

ReactElement createElement(
    string/ReactClass type, 
    [object props], 
    [children ...] 
) 

मूल रूप से अपने JSX fr चला जाता है ओम

<div style="color: white;"> 
    <div></div> 
</div> 

React.createElement('div', { style: { color: 'white' } }, [ 
    React.createElement('div', {}, []) 
]) 

को इसी कारण से आप एक समारोह में एक पैरामीटर के लिए एक पाश पारित नहीं हो सकता, आप JSX में एक पाश नहीं डाल सकते हैं। यह अंत होगा

React.createElement('div', { style: { color: 'white' } }, [ 
    React.createElement('div', {}, for (;;) <div></div>) 
]) 

जिस पर सभी मतलब नहीं है की तरह लग रही है क्योंकि आप एक परम के रूप में पाश के लिए एक पारित नहीं कर सकते हैं। दूसरी तरफ, एक नक्शा कॉल एक सरणी देता है, जो React.createElement के तीसरे पैरामीटर के लिए सही प्रकार है।

प्रतिक्रिया अभी भी दिन के अंत में वर्चुअल डोम लाइब्रेरी है, लेकिन जेएसएक्स सिर्फ इसे लिखने के लिए और अधिक परिचित बनाता है। hyperscript एक वर्ड लाइब्रेरी का एक और अच्छा उदाहरण है, लेकिन जहां JSX मानक नहीं है। उनके रीडमेम पर उनका उदाहरण जेएसएक्स के बिना प्रतिक्रिया जैसा दिखता है:

var h = require('hyperscript') 
h('div#page', 
    h('div#header', 
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })), 
    h('div#menu', { style: {'background-color': '#2f2'} }, 
    h('ul', 
     h('li', 'one'), 
     h('li', 'two'), 
     h('li', 'three'))), 
    h('h2', 'content title', { style: {'background-color': '#f22'} }), 
    h('p', 
     "so it's just like a templating engine,\n", 
     "but easy to use inline with javascript\n"), 
    h('p', 
     "the intension is for this to be used to create\n", 
     "reusable, interactive html widgets. ")) 

Answer 2

आपके जेएसएक्स में आपके पास लूप नहीं हो सकता है। तो अगर आपके पास लूप के आस-पास {} है तो यह काम नहीं करता है। इसके बजाय नीचे दिए गए कोड में दिखाए गए मानचित्र का उपयोग करें। अपने डेटा को socials is an array मानना ​​और न केवल एक वस्तु।

सामाजिक यदि एक वस्तु आप उपयोग करना Object.keys(socials).map(function(key)){}

class App extends React.Component { 
 
    render() { 
 
    let socialBar = null; 
 
    let socials = [{ 
 
    foo: 'http://foo' 
 
}] 
 
if (socials) { 
 
    socialBar = <div className='align-bottom text-center'> 
 
       <ul className='list-inline social-list mb24'> 
 
        {socials.map(function(social, index) { 
 
         
 
        return <li key={index}> 
 
        <a alt={index} href={social.foo}>{ social.foo }</a> 
 
        </li> 
 
        
 
        }) } 
 
       </ul> 
 
       </div> 
 
} 
 
    return (
 
     <div>{socialBar}</div> 
 
    ) 
 
    } 
 

 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 
<div id="app"></div>