Wie richte ich ein Array von Objekten in React?

Question

Könntest du mir bitte sagen, wie man eine Liste in react js rendert. Ich mag dieses

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component { 
    constructor (props){ 
    super(props); 

    } 

    render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>; 

    return (
     <div> 
     hello 
     </div> 
    ); 
    } 
} 

Answer 1

Sie es auf zwei Arten tun:

Erste

render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); 

    return (
     <div> 
     {listItems } 
     </div> 
    ); 
    } 

Zweitens: Direkt die Kartenfunktion in der Schreib machen

render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    return (
     <div> 
     {data.map(function(d, idx){ 
     return (<li key={idx}>{d.name}</li>) 
     })} 
     </div> 
    ); 
    } 

Answer 2

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

Sie können eine beliebige JavaScript-Ausdruck als Kinder weitergeben, indem sie sie in {} eingeschlossen wird. Diese Ausdrücke sind beispielsweise äquivalent:

<MyComponent>foo</MyComponent> 

<MyComponent>{'foo'}</MyComponent> 

Dies ist oft nützlich zum Rendern einer Liste von JSX-Ausdrücken beliebiger Länge. Zum Beispiel, dies macht eine HTML-Liste:

function Item(props) { 
    return <li>{props.message}</li>; 
} 

function TodoList() { 
    const todos = ['finish doc', 'submit pr', 'nag dan to review']; 
    return (
    <ul> 
     {todos.map((message) => <Item key={message} message={message} />)} 
    </ul> 
); 
} 

---

class First extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     data: [{name: 'bob'}, {name: 'chris'}], 
 
    }; 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <ul> 
 
     {this.state.data.map(d => <li key={d.name}>{d.name}</li>)} 
 
     </ul> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <First />, 
 
    document.getElementById('root') 
 
); 
 

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