React'ta bir nesne dizisi nasıl oluşturulur?

Question

Lütfen tepki js'de nasıl liste oluşturulacağını söyler misiniz? Bu

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

sevmiyorum

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

Bunu iki şekilde yapabiliriz

:

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

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

İkinci

İlk: Doğrudan haritası işlevi yazıp render

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

Sen {} içinde onu içine alarak, çocuklar gibi herhangi bir JavaScript ifadesini geçebilir. Örneğin, bu ifade eşdeğerdir: Bu genellikle istenilen uzunlukta JSX ifadelerin listesini oluşturma için yararlıdır

<MyComponent>foo</MyComponent> 

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

.

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>