博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react基本知识点合集
阅读量:4625 次
发布时间:2019-06-09

本文共 1607 字,大约阅读时间需要 5 分钟。

妹子UI里面有React的相关组件与用法:http://amazeui.org/react/components

React官方网站:https://facebook.github.io/react/docs/getting-started.html

React中文网站:http://www.css88.com/react/docs/getting-started.html

1、react两种注释:

这个是在react里面的。
{/* 要注释的内容 */}
在代码行里面用
/* */

2、html中的class在react中用className,html中的for在react中用htmlFor,行内样式书写规范style={

{
color:'red'}}

3、添加自定义属性之前添加data-前缀:<div data-custom-attribute="foo" />

4、react中的表达式的用法:

  在className中直接可以判断什么状态用什么样式:className={

2 > 1 ? 'class-a' : 'class-b'}

  在模块中直接根据条件来判断具体用哪一个组件:{

window.isLoggedIn ? <Nav /> : <Login />}

5、html转义:后台传过来的数据带页面标签的是不能直接转义的,具体转义的写法如下:

var content='content';     React.render(    
, document.body);

6、传播属性和延伸属性:

如果提前知道属性的话直接写就好了,用传播属性即可:var component = <Component foo={

x} bar={
y} />;

如果属性是后来动态添加的话上面的那种形式就不太适合了,需要用延伸属性:

var props = {};props.foo = x;props.bar = y;var component = 
;//或者var props = { foo: x, bar: y };var component =
;

7、在React中大多以JSX方式书写。JSX是一个语法糖,最终都会被解析为纯JavaScript代码。React虽然也可以直接使用javascript书写,但是官网推荐支持的是JSX方式。要把带有JSX语法的代码转化为纯Javascript代码,在script标签中要加上type="text/jsx",并引入JSXTransformer.js文件即可。这种方式不适用于生产环境,生产环境需要提前编译转换好。用npm全局安装react-tools即可:npm install -g react-tools

8、组件开发:开发组件的时候可以将相关的组件关联在一起。如父组件里面有多个子组件的情况,可以如下方式操作:  

var Form = MyFormComponent; var App = (  
);//这样你只需将子组件的ReactClass作为其父组件的属性:var MyFormComponent = React.createClass({ ... }); MyFormComponent.Row = React.createClass({ ... });MyFormComponent.Label = React.createClass({ ... });MyFormComponent.Input = React.createClass({ ... });

  

 

转载于:https://www.cnblogs.com/marymei0107/p/5834003.html

你可能感兴趣的文章
Html5游戏从0开始
查看>>
phpexcel导出数据表格
查看>>
COM编程_第一讲_深入COM框架以及实现简单的COM
查看>>
自签名证书
查看>>
【Win 10 应用开发】三维变换
查看>>
域名扫描工具Fierce
查看>>
201621123055《JAVA程序设计》第六周学习总结
查看>>
yii框架开启事务
查看>>
Chrome F12调试
查看>>
扩容 /dev/mapper/centos-root空间的过程记录
查看>>
经典案例复盘——运维专家讲述如何实现K8S落地
查看>>
【HTML5】---【HTML5提供的一些新的标签用法以及和HTML 4的区别】
查看>>
添加sudo命令
查看>>
策略模式,我与你的三次相遇。
查看>>
43左旋转字符串+三步反转法
查看>>
CTF线下赛AWD模式下的生存技巧
查看>>
我的思想境界
查看>>
QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据
查看>>
在VM已安装Android4.4 连接小米手环 网络设置
查看>>
HDU4939Stupid Tower Defense (有思想的dp)
查看>>