JSX für ... in Schleife

Question

dieses Objekt Gegeben:

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

will ich durch sie in JSX Schleife. Dies funktioniert:

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> 
} 

Aber dies nicht (soziale undefined):

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> 
} 

Was ist der Grund social im zweiten Beispiel nicht definiert ist? Ich nehme an, dass es ein Problem mit den inneren Klammern gibt, aber ich habe es nicht erfolgreich gelöst.

Ich kann eine forEach mit Objektschlüssel tun und tun, wie in diesem post, aber das ist nicht viel anders als mein Arbeitsbeispiel.

Um klar zu sein - ich habe es funktioniert, möchte ich einfach auf das Problem Scoping (oder Syntaxfehler, wenn ja) in meinem zweiten Beispiel zu klären.

Answer 1

JSX verwenden müssen nur Zucker, die zu einer Reihe von Funktionsaufrufen von React.createElement transpiled wird, mit dem Sie die Dokumentation finden können, hier: https://facebook.github.io/react/docs/top-level-api.html#react.createelement

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

Grundsätzlich geht Ihr JSX fr om

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

zu

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

Aus dem gleichen Grund, warum Sie nicht eine Schleife auf einen Parameter in einer Funktion übergeben können, können Sie nicht eine Schleife in JSX setzen. Es würde aussehen wie

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

beenden, die keinen Sinn machen überhaupt, weil Sie nicht ein for-Schleife als param passieren können. Auf der anderen Seite gibt ein Map-Aufruf ein Array zurück, das der richtige Typ für den dritten Parameter von React.createElement ist.

React ist immer noch eine virtuelle dom-Bibliothek am Ende des Tages, aber JSX macht es nur vertrauter zu schreiben. hyperscript ist ein weiteres gutes Beispiel für eine VDOM-Bibliothek, aber JSX ist kein Standard. Ihr Beispiel auf ihrem README ist ähnlich zu dem, was React ohne JSX aussehen würde:

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

In Ihrem JSX können Sie keine for-Schleife haben. Auch wenn Sie {} um Ihre for-Schleife haben, funktioniert es nicht. Verwenden Sie stattdessen eine Karte wie im folgenden Code gezeigt. Angenommen, Ihre Daten socials is an array und nicht nur ein Objekt.

Wenn socials ist ein Objekt, das Sie 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>