React学习（三）：通过 React 编写名片组件（React属性）

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（二）：编写 React 组件并成功挂载
效果预览：

1. 启动 my-project 工程

a. 进入工程目录启动工程

npm start

b. 下载 bootstrap 用于样式

npm install bootstrap --save

2. 编写名片组件

a. 在 src 目录下新建文件夹 componets 并在该目录下新建 NameCard.js 文件

b. 在 NameCard,js 文件中编写以下内容

import React from "react";
class NameCard extends React.Component {
    render() {
        // 采用了 ES6 的析构的方法，以便于编写简单
        const { name, number, isHuman, tags } = this.props
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{ isHuman ? '人类' : '外星生物' }</li>
                </ul>
                <hr/>
                <p>
                    { tags.map((tag, index) => (
                        <span className="btn badge-pill btn-primary" key={index}>{tag}</span>
                    ))}
                </p>
            </div>
        )
    }
}
export default NameCard

b. 在 index.js 中引入 bootstrap 文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 引用 bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

c. 将 App.js 文件修改成以下内容

import logo from './logo.svg';
import './App.css';
// 将编写的 NameCard 引入 React 入口文件中
import NameCard from './componets/NameCard';

// 创建标签变量，用于传入 NameCard 组件
const tags = ['音乐', '电玩']
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <NameCard name='incercadi' number={17755169222} isHuman tags={tags}/>
    </div>
  );
}
export default App;

d. 保存文件刷新网页即可得到以下结果

3. 将名片组件修改成函数

a. 将 NameCard.js 文件修改成以下内容

import React from "react";
// 将组件修改成函数
const NameCard = (props) => {
    const { name, number, isHuman, tags } = props
    return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{ isHuman ? '人类' : '外星生物' }</li>
                </ul>
                <hr/>
                <p>
                    { tags.map((tag, index) => (
                        <span className="btn badge-pill btn-primary" key={index}>{tag}</span>
                    ))}
                </p>
            </div>
    )
}

b. 刷新页面可得到和之前一样的效果