0

0

React中常用一些技巧总结(代码)

不言

不言

发布时间:2018-09-07 17:45:19

|

1889人浏览过

|

来源于php中文网

原创

本篇文章给大家带来的内容是关于React中常用一些技巧总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一.React-classnames库

在实际应用中,经常会遇到根据某些状态增加或更改组件属性中类名的情况,为了更好地满足的class动态切换的需求,React提供了classNames工具 

安装:
npm install classnames --save
引入classnames库:
import classnames from 'classnames'

用法:

1.基本使用

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

2.也可以传入数组对象

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

3.可以传入动态class

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

参考gitHub

二.qs.parse()、qs.stringify()使用方法

qs是一个npm仓库所管理的包(可通过npm install qs命令进行安装,Dva中已经有,所以不需要安装).

引用的是:import  qs from 'qs';
1. qs.parse()将URL解析成对象的形式

import  Qs from 'qs';
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
Qs.parse(url);
console.log(Qs.parse(url));

如上面代码所示,输出结果如下: 

{
	method:'query_sql_dataset_data',
	projectId:'85',
	appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'
}

 2. qs.stringify()将对象 序列化成URL的形式,以&进行拼接

import  Qs from 'qs';
let obj= {
     method: "query_sql_dataset_data",
     projectId: "85",
     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
     datasetId: " 12564701"
   };
Qs.stringify(obj);
console.log(Qs.stringify(obj));

输出的是:

method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0&datasetId=%12564701

在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:

doxygen 官方手册
doxygen 官方手册

doxygen是一款好用的程序员辅助工具,它可以让程序添加批添代码更加简单轻松,兼容C++、 C、Java、 Objective-C、Python等主流编程语言,小编提供的doxygen中文手册包含了基本介绍、语法技巧以及进阶技巧等内容,可以让你快速上手操作,有需要的欢迎下载。 基本介绍 Doxygen已经支持生成ANSI编码的chm目录文件(index.hhc)!Doxygen通常是用作生成英文文档的,生成中文文档需要修改输入和输出的码制,这样可以改变解析方式,生成中文文档。但是,你必须意识 到,Dox

下载
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

 如上所示,前者是采用JSON.stringify(param)进行处理,后者是采用Qs.stringify(param)进行处理的。

三.引用阿里字体库Iconfont

(1).阿里字体库Iconfont--找自己需要的图片--下载到本地

(2).引用字体图片

20180907153834114.png

在 public里面的index.html中引用:

在组件中使用

注意:上面这样引用虽然可以显示,但是会报错 (Invalid DOM property `class`. Did you mean `className`?) 所以目前只能下载成图标,然后进行引用了

constructor(props) {
	super(props);
	this.state = {
		"userImg": require('../../assets/img/user.png'),
		"address": require('../../assets/img/address.svg'),
	};
}
@@##@@

 相关推荐:

React高阶组件使用技巧总结

PHP常用技巧总结,php总结

React中常用一些技巧总结(代码)

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

1930

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1263

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1169

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

948

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1399

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1229

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1439

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1303

2023.11.13

桌面文件位置介绍
桌面文件位置介绍

本专题整合了桌面文件相关教程,阅读专题下面的文章了解更多内容。

0

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号