react 学习：React属性数组遍历、css引入

一：index.js 里直接引入css。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import Welcome from './Welcome';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(<App/>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

二：自定义名片组件：

1、新建文件夹components .新建NameCard.js

组件写法：

import React from 'react'
class NameCard extends React.Component{

    render(){
        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? '人类':'waixingsheng'}</li>
                    <hr/>
                    <p>
                        { tags.map((tag,index)=> (
                            <span key={index} className="badge badge-pill badge-primary">{tag}</span>
                        ))}
                    </p>
                </ul>
            </div>
        )
    }
}

export default NameCard

2 函数写法；

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? '人类':'waixingsheng'}</li>
            <hr/>
            <p>
                { tags.map((tag,index)=> (
                    <span key={index} className="badge badge-pill badge-primary">{tag}</span>
                ))}
            </p>
        </ul>
    </div>
    )
}

三、在App.js 使用

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
const tags=['男神']
class App extends Component {

  render() {
    return (
      <div className="App">
         <div className={"App-header"}>
             <img src={logo} className={"App-logo"} alt={"logo"}/>
             <h2>欢迎来到矿洞程序员</h2>
             <NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />
         </div>
         </div>
    );
  }
  }

export default App;

四：查看浏览器效果

react 学习：React属性 数组遍历、css引入

猜你喜欢

react 学习：React属性数组遍历、css引入