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

野性酷女 2022-02-19 02:01 157阅读 0赞

一：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;

四：查看浏览器效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220219/89c48fcb0ed24120a33c7d69ad1f483e.png