react学习中的一些细节
来源:互联网 发布:法院速录员听打软件 编辑:程序博客网 时间:2024/05/22 12:50
1、css相关
react的css引用方式:
var styles = require("./Category.css");
import styles from "./Category.css";
传统的方式是 <link type="text/css" src="./Category.css">
组件的使用方式:
<div className={styles.entry}>test</div>
传统的方式是<div class="entry">test</div>
要使用两个类,className = {styles.entry+" "+styles.output}
想使用行内样式,就是这样的写法:
<div style={{background:"red",color:"#3c78FF"}}>test</div>
或者
var styles = {
background: red;
color:#3c78FF;
}
<div style={styles}>test</div>
2、组件生命周期函数
Mounting:
getDefaultProps();
getInitialState();
componentWillMount();
render();
componentDidMount();
Updating:
componentWillReceiveProps();
shouldComponentUpdate();
componentWillUpdate();
render();
componentDidUpdate();
3、react中常用的es6写法总结
模块部分
导入:
import "模块url";
import 组件 from "组件模块url";
导出:
export default class MyComponent extends Component{
//your coding
}
import MyComponent form "./MyComponent";
定义组件部分
class MyComponent extends Component{
render() {
return (
<Image source={this.props.source} />
)
}
}
定义组件属性类型和默认属性
class MyComponent extends Component{
static defaultProps = {
autoPlay : false,
maxLoops : 10
};
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops :React.PropTypes.number.isRequired
};
render() {
//coding
}
}
初始化state
class video extends react.Component{
constructor (props){
super(props);
this.state = {
};
}
}
4、react的子组件向父组件传值,本质上就是把父组件的属性当作函数来处理
父组件:
<Content onClickEvent={this.handleClick.bind(this)}></Content>
子组件:
通过时间来调用this.props.onClickEvent(参数);
代码方式为:
handleEvent() {
this.props.onClickEvent(参数);
}
0 0
- react学习中的一些细节
- Oracle学习中的一些细节
- 学习过程中的一些细节
- react的一些细节
- 【react学习】关于react框架使用的一些细节要点的思考
- 【react学习】关于react框架使用的一些细节要点的思考
- 【react学习】关于react框架使用的一些细节要点的思考
- 网络中的一些细节
- 计算机网络中的一些细节
- 编程中的一些细节
- 程序中的一些细节
- JavaScript中的一些细节
- JavaScript中的一些细节
- IOS中的一些细节
- InSAR学习(二)基本原理中的一些细节
- HttpServlet基本学习和Servlet中的一些细节
- React总结5:React中的一些坑
- CSS中的一些细节问题
- Redis持久化配置
- 《现代操作系统》笔记
- Java Web开发6___包含 Web 资源----RequestDispatcher.include 方法
- redis安装
- 如何教孩子Scheme编程(1)
- react学习中的一些细节
- 某个土壤检测网页项目记录
- Brackets Sequence
- 单向链表实现堆栈
- LVS(Linux Virtual server)
- 实验吧_登陆一下好吗??
- redis命令
- HUST 1422
- Linux 一 Linux系统入门及获取帮助