React技术栈 --》组件对比和评论列表案例 ## Day4

最新推荐文章于 2024-07-25 17:22:28 发布

2401_85158559

最新推荐文章于 2024-07-25 17:22:28 发布

阅读量931

点赞数 14

分类专栏：程序员文章标签： react.js okhttp 前端

本文链接：https://blog.csdn.net/2401_85158559/article/details/140381331

版权

程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

props中的数据都是外界传递过来的，数据都是只读的；不能重新赋值； state/data中的数据，都是组件私有的；(通过Ajax获取回来的数据，一般都是私有数据)，数据都是可读可写的

注意

使用class关键字创建的组件，有自己的私有数据和生命周期函数；使用function创建的组件，只有props，没有自己的私有数据和生命周期函数。

二、React创建组件实现评论列表

==================

实现评论列表的HTML骨架

根据以上学习内容，现在实现一个简单的小案例，将评论列表和评论内容抽离出来封装到俩个单独的jsx文件夹下。


//ComponmentList.jsx文件

import React from "react"



// 导入 评论项 子组件

import CmtItem from '@/components/CmtItem' //使用@更加方便的移动导入的文件路径



// 使用class关键字定义父组件

export default class ComponmentList extends React.Component{

    constructor(){

        super(),

        this.state = {

            ComponmentList:[//评论列表数据

                {id:1,user:'张三',content:'我姓张'},

                {id:2,user:'李四',content:'我姓李'},

                {id:3,user:'王五',content:'我姓王'},

                {id:4,user:'赵六',content:'我姓赵'},

                {id:5,user:'田七',content:'我姓田'},

            ]

        }

    }



    // 渲染当前组件所对应的虚拟DOM

    render(){

        return <div>

            <h1>这是评论列表组件</h1>

            {this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}

        </div>

    }

}


//CmtItem.jsx文件

import React from "react"



//使用 function 构造函数，定义普通的无状态组件

export default function CmtItem(props){

    return <div>

    <h1>评论人：{props.user}</h1>

    <p>评论内容：{props.content}</p>

</div>

}

现在我们导入评论内容的子组件，将创建好的虚拟DOM渲染到页面上，大功告成！


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



import ComponmentList from '@/components/ComponmentList'



ReactDOM.render(<div>

    <ComponmentList></ComponmentList>

</div>,document.getElementById('app'))

实现评论列表的CSS样式

在正常项目中我们书写CSS样式的方式很简单，能不能在React中使用呢？试一试

我们正常书写内联样式的方式就是这样，看看浏览器结果。。。。报错？

报错并不可怕，关键你有理解报错的原因和处理报错的能力。报错提醒我们在JSX中书写行内样式的不能上string，并且给我提供了书写的例子，看for example，两个大括号的含义分别是：外层的大括号表示的是要书写JSX，里面的那层表示要书写的是样式对象。

注意点：在行内样式中，如果是数值类型的样式，则可以不用引号包裹，如果是字符串类型的样式，必须使用引号包裹。


<h1 style={{color:'red',fontSize:'35px',zIndex:4}}>这是评论列表组件</h1>

解决样式格式书写之后，可以正式对评论列表进行编辑了，如下所示：


// 渲染当前组件所对应的虚拟DOM

render(){

    return <div>

        {/* 在JSX中书写行内样式的格式为 style={{color:'red'}} */}

        {/* 在行内样式中，如果是数值类型的样式，则可以不用引号包裹，如果是字符串类型的样式值，必须使用引号包裹 */}

        <h1 style={{color:'red',fontSize:'35px',zIndex:4,fontWeight:200,textAlign:'center'}}>这是评论列表组件</h1>

        {this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}

    </div>

}


//使用 function 构造函数，定义普通的无状态组件

export default function CmtItem(props){

    return <div style={{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}}>

    <h1 style={{fontSize:'14px'}}>评论人：{props.user}</h1>

    <p style={{fontSize:'12px '}}>评论内容：{props.content}</p>

</div>

}

相信大家都理解，在内联样式中编写css，代码太长影响代码的整体的美观。在JSX中如何处理？

配置CSS样式表


//第一层封装：将样式对象和UI结构分离

const CmtItemdiv = {border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}

const CmtItemh1 = {fontSize:'14px'}

const CmtItemp = {fontSize:'12px '}



//使用 function 构造函数，定义普通的无状态组件

export default function CmtItem(props){

    return <div style={CmtItemdiv}>

    <h1 style={CmtItemh1}>评论人：{props.user}</h1>

    <p style={CmtItemp}>评论内容：{props.content}</p>

</div>

}


//第二层封装：合并成一个大的样式表对象

const style = {

    item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},

    user:{fontSize:'14px'},

    content:{fontSize:'12px '}

}



//使用 function 构造函数，定义普通的无状态组件

export default function CmtItem(props){

    return <div style={style.item}>

    <h1 style={style.user}>评论人：{props.user}</h1>

    <p style={style.content}>评论内容：{props.content}</p>

</div>

}


//第三层封装：抽离为单独的样式表模块 

//举例：将style封装在src下components文件夹下创建的style.js文件里

export default {

    item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},

    user:{fontSize:'14px'},

    content:{fontSize:'12px '}

}



//需要style的文件下导入以下命令即可

//import style from '@/components/style.js'

虽然将css抽离到 .js 文件，但还是有点毛病，正常我们书写css的时候，不是将css写入 .css文件中的吗？这样书写css样式才简单明洁，我们可以创建一个css文件夹，如果文件需要样式，我们可以将样式进行导入吗？可以的

在src新建css文件夹，写入格式导入需要样式的组件文件夹中，出现报错，为什么？


import cssobj from '@/css/ComponmentList.css'

提示：因为webpack默认处理不了后缀名为css的文件，想处理的话必须加loader，所以我们安装

新建终端或者拆分终端执行：安装完成后配置webpack.config.js的第三方模块


cnpm i style-loader css-loader -D

配置完成后，新建终端再次执行一次打包 npm run dev 没有报错说明引入css文件成功。

举个例子吧，在css文件中书写代码如下


.title{

    color: red;

}

直接调用css样式即可，如下图，成功

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOT

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

dlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

2401_85158559

关注

14
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
React技术栈 --》组件对比和评论列表案例 ## Day4

全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库!真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲详情关注公中号【编程进阶路】VUE组件库级组件封装-高复用弹窗组件。
复制链接

扫一扫