reactjs 注意点
2016-07-16 14:56
471 查看
render的return
return前要留一空行
return的括号要分别各占一行,不能与html同行
return中的html必须要有顶层容器包裹
return中的循环不能用for,改用map方法
jsx写法
jsx所有标签要闭合
jsx关键词写法
class -> className
for -> htmlFor
style -> {} 是一个对象,key使用JavaScript的驼峰命令,可以使用内联或外部对象
内联对象,双大括号
外部对象,单大括号
Reactjs中使用if/else
jsx不支持if/else,使用三元表达式代替
在jsx外部使用if/else
children
this.props.children 的子元素为多个,则为数组,子元素为1个,则为单个对象,非数组
dom取值
获取input,checkbox,radio,select的value值,使用event.target.value 或 refs[domName].value
return前要留一空行
return的括号要分别各占一行,不能与html同行
return中的html必须要有顶层容器包裹
return中的循环不能用for,改用map方法
jsx写法
jsx所有标签要闭合
jsx关键词写法
class -> className
for -> htmlFor
style -> {} 是一个对象,key使用JavaScript的驼峰命令,可以使用内联或外部对象
内联对象,双大括号
React.render(<div style={{color:"red"}}>Hello World!</div>, mountNode);
外部对象,单大括号
var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; React.render(<div style={divStyle}>Hello World!</div>, mountNode);
Reactjs中使用if/else
jsx不支持if/else,使用三元表达式代替
React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
在jsx外部使用if/else
var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } else { loginButton = <LoginButton />; } return ( <nav> <Home /> {loginButton} </nav> )
children
this.props.children 的子元素为多个,则为数组,子元素为1个,则为单个对象,非数组
dom取值
获取input,checkbox,radio,select的value值,使用event.target.value 或 refs[domName].value
相关文章推荐
- 22 个优质的 React 开源项目
- React Native iOS环境搭建
- React-Redux (初探)
- React Native——我的学习套路
- RX(Reactive Extinsion)和IX(Interactive Extinsion)库改名了
- React.js 之筛选篇
- 解决sudo npm install -g react-native-cli 报错问题
- React Native点击按钮修改页面
- React Native调用开源组件库、安卓原生控件(Android端)
- [个人博客搬运]ReactiveCocoa学习笔记
- IOS老工程pod适配ReactNative坑点
- Reactjs 'Symbol' is undefined in IE 11
- 适用于UWP应用开发的开源React Native插件
- React Native的iOS开发步骤以及崩溃收集
- 如何评价 React Native?
- 移动客户端开发快速上手ReactNative的学习路线
- react native 修改安卓Switch颜色样式
- ReactiveCocoa入门教程:第一部分
- 使用 webpack + react + redux + es6 开发组件化前端项目
- React +ES6 +Webpack入门