脚本宝典收集整理的这篇文章主要介绍了react 基础,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1、render 函数 里面只能用一个标签
PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//正确
render () {
return (hello)
}
//错误
render () {
return (
hello
//正确
render () {
return (<div>hello<div>)
}
//错误
render () {
return (
<div>hello<div>
<div>world<div>
)
}
2、state在组件在的定义、使用、以及改变
- 定义
//在constructor函数中定义
constructor ( PRops ) {
super(props);
this.state = {
inputValue:"",
list:[]
}
}
- 使用
<input value = { this.state.inputValue} />
- 改变
<input value = { this.state.inputValue} onChange = {this.changeInput.bind(this)} />
//方法一
changeInput(e){
this.setState({
inputValue:e.target.value
})
}
//方法二
changeInput(e){
const value = e.target.value;//需要保存变量,不能在下面直接用e.target.value,或者会报错
this.setState(()=>({
inputValue:value
}))
}
3、注释写法
{/*注释*/}
//或者
{
//注释
}
4、css中的class与es6的class冲突,改用classname来代替
5、laber标签和input做关联是所用的for 要用htMLFor来代替
6、父组件传值给子组件
this.props.content}" title="" data-original-title="复制">
//父组件通过属性的方式传给子组件
//父组件
<todoList content = {item} />
//子组件接受则用props
//子组件
<div>{this.props.content}</div>
7、子组件像父组件传参
//父组件通过属性传父组件的方法给子组件(注意:必须bind(this),否则子组件this指向有问题)
//父组件
<todoList delete = {this.delete.bind(this)} />
//子组件接受
delete(){
this.props.delete();
}
8、PropTypes和defaultProps进行类型检查
查考文档链接描述
//子组件
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
9、refs获取@L_777_27@m
参考文档链接描述
脚本宝典总结
以上是脚本宝典为你收集整理的react 基础全部内容,希望文章能够帮你解决react 基础所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
猜你在找的ES2015(es6)相关文章
-
vuex 基本入门和使用(二)
2019-08-19
-
默认参数如何在JavaScript ES6中工作
2018-11-14
-
JavaScript ES6功能:好的部件
2018-11-14
-
如何使用ES6箭头函数使您的JavaScript更易于阅读
2018-11-14
-
如何使用ES6在JavaScript中有条件地构建对象
2018-11-14
-
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码
2018-11-14
-
5个在ES6中修复的JavaScript“坏”的部分
2018-11-13
-
分享干货ECMAScript 2015(ES6)提示和技巧非常有用
2018-11-13
-
JavaScript ES6 - 写得少,做得更多 write less, do more
2018-11-13
-
什么时候(和为什么)你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能
2018-11-12
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程