11 Passing Date Into Our Components

最新推荐文章于 2023-04-24 19:15:00 发布

原创最新推荐文章于 2023-04-24 19:15:00 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

react for everyone 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用React实现的简单联系人列表组件。该组件接收联系人数据作为属性，并将其姓名和电话号码显示在一个列表中。示例展示了如何在App组件中使用此联系人列表。

vi ContactsList.js

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

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

        return(
            <ul>
            <li> {this.props.contacts.name} :{this.props.contacts.phone}</li>
            </ul>
            )
    }
}
export default ContactsList;

vi App.js

import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';
const contacts ={
        name: 'scott',
        phone:'555 666 5555'
    };
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'));