【React系列教程二】项目目录介绍、创建和使用组件、绑定数据和属性、引入图片、循环数组

Z时代
2024-01-10
分类：综合

react

一、项目目录结构介绍：

教程一中生成的reactdemo02项目，用VSCode打开，结构如下图所示：

其中public\index.html是入口文件；public\favicon.ico是网站右上角的小图标；src主要是开发项目放的文件；src\index.js也是react的入口文件；src\App.js是一个根组件。

二、创建及使用组件：（可参考src\App.js文件）

1、下面创建一个ComA.js组件，一般组件的整体结构都长这样：

import React, { Component } from 'react';
class ComA extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>ComA</div>
        );
    }
}export default ComA;

注：A、组件名称首字母大写。B、子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。C、render函数中return只能包含一个根节点。

2、在src\App.js中使用ComA组件：用import引入，然后直接在render中当标签使用。

import React from 'react';
import ComA from './ComA';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
              <ComA/>
            </div>
        );
    }
}export default APP;

三、绑定数据和绑定属性

在state中添加数据，在render中通过{this.state.xxx}获取数据：

import React, { Component } from 'react';
import '.home.css';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:"我是一条msg",
            title:"i am a title",        
        };
    }
    render() {
        return (
            <div>
                <h2 title={this.state.title}>{this.state.msg}</h2>
                <p className='red'>我是红色的文字</p>
                <label htmlFor='name'>name:</label>
                <input id='name'></input>
                <div style={{marginLeft:'10px',color:'red'}}>我是一个带有行内样式的元素</div>
            </div>
        );
    }
}export default Home;

注：绑定属性注意：class 要变成 className；for 要变成 htmlFor；style是一个用{}包裹的对象。

四、引入图片：

import React from 'react';
import '.home.css';
import pic from '.pic.jpg';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={}
    }
    render(){
        return (
            <div>
                下面引入是错误的：
                <img src='../assets/images/pic.jpg' alt=""></img>
                引入本地图片的两种方法：
                方法1，用import的方式：
                <img src={pic} alt=""></img>
                方法2，用require的方式：
                <img src={require('.pic.jpg')} alt=""></img>
                引入远程图片：
                <img src="https://www.baidu.com/img/bd_logo1.png" alt=''></img>
            </div>
        )
    }
}export default Home;

五、循环数组

import React from 'react';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list1:[<h2>新闻1</h2>,<h2>新闻2</h2>],
            list2:[{"name":"新闻1"},{"name":"新闻2"},{"name":"新闻3"},{"name":"新闻4"}],
        }
    }
    render(){
        return (
            <div>
                {this.state.list1}
                <ul>
                {
                    this.state.list2.map(function(value,key){
                        return <li key={key}>{value.name}</li>
                    })
                }
            </div>
        )
    }
}export default Home;