第2.7.5章：组件化、示例-名片

image.png

---

NameCard.js是组件

import React, { Component } from 'react'

export class NameCard extends Component {
  render() {
    const { name, number, isHuman, tags } = this.props;
    return (
      <div>
        <h4>{name}</h4>
        <ul>
          <li>电话： {number}</li>
          <li>{isHuman? '人类':'外星人'}</li>
        </ul>
        <p>{tags}</p>
      </div>
    )
  }
}

export default NameCard

---

App.js

import React, { Component } from 'react';
import NameCard from './components/NameCard';
const tagList = ['a','b','v'];

export class App extends Component {
  render() {
    return (
      <div>
        <h3>hello Wrold!</h3>
        <NameCard name="雷佳音" number="34567890-00" isHuman={false} tags={tagList}/>
      </div>
    )
  }
}

export default App