12 Iterationg Over Data With JSX

最新推荐文章于 2025-01-14 23:04:56 发布

原创最新推荐文章于 2025-01-14 23:04:56 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

vi src/Contact.js

import React from 'react';

class Contact extends React.Component{

    render(){
         console.log(this.props.contacts);

        return(
            <ul>
            <li> {this.props.contact.name} {this.props.contact.phone}</li>
            </ul>
            )
    }
}
export default Contact;

vi ContactsList.js

import React from 'react';
import Contact from './Contact';
class ContactsList extends React.Component{

    render(){
         console.log(this.props.contacts);

        return(
            <ul>
            {this.props.contacts.map((contact)=>{
                return <Contact  contact={contact} key={contact.id}/>
            })}


            </ul>
            )
    }
}
export default ContactsList;

vi src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';
const contacts =[
    {
        id :1,
        name: 'scott',
        phone:'555 666 5555'
    },
    {  id :2,
        name: 'Denny',
        phone:'555 666 6666'
    },
    {
        id :3,
        name: 'Dennis',
        phone:'555 666 7777'
    },
    {
        id :4,
        name: 'Copa',
        phone:'888 666 7777'
    }

    ]
class App extends React.Component {


render(){
     console.log(this.props.contacts);
    return(
        <div>
        <h1> Contacts List</h1>
        <ContactsList  contacts={this.props.contacts}/>
        </div>

        )
}


}

ReactDOM.render(<App contacts ={contacts}/>,document.getElementById('app'));