React and React with ES6
2015-10-07 00:00
886 查看
此文章会逐步更新,主要记录使用react遇到的问题和解决方案...
React 和 ES6
这个介绍的很完整,看这个吧,https://babeljs.io/blog/2015/06/07/react-on-es6-plus
慢慢开始流行起来,但是React支持不是很好。目前我使用版本是0.14.0
ES6介绍
用React.Component
ES6 Classes官网有介绍
不支持getInitialState,如需在constructor通过this.state={}赋值
propTypes、defaultProps 作为properties定义。
不支持mixins
所以写出来就是这样子
class TodoApp extends React.Component { constructor(props){ super(props); // 需要在第一行 this.state = {}; // unwork,官网说不支持 //this.mixins = [xxx]; } render() { return ( <div> <button type="button" onClick={this.handleAdd.bind(this)}>add</button> <div> {this.props.todos} </div> </div> ); } handleAdd() { // something } } TodoApp.propTypes = { todos: React.PropTypes.array.isRequire }; //TodoApp.defaultProps = { xxx };
由于不支持mixins,大大的遗憾啊。所以React.Component也没有啥用处了。还是不要使用好。
React 相关
key 提示
// 以下代码会提示,确实很烦人。 而且如果不解决,遇到某些场景react还真不更新了,需要引起重视。 // Warning: Each child in an array or iterator should have a unique "key" prop. var GridHead = React.createClass({ render: function () { var data = this.props.data; return ( <thead> <tr> {data.columns.map((col, i) => (<th key={i}>{col.name}</th>))} </tr> </thead> ) } }); // 加个key即可 {data.columns.map((col, i) => (<th key={i}>{col.name}</th>))}
空怎么表示
// 有时候需要根据某些条件判断是否显示html,如下三目操作符。 // 通过chrome控制台可以看到 tr 下面会有个奇怪的 span。 var GridHead = React.createClass({ render: function () { var data = this.props.data; return ( <thead> <tr> {data.columns.map((col, i) => (<th key={i}>{col.name}</th>))} {data.actions.length > 0 ? (<th>操作</th>) : ''} </tr> </thead> ) } }); // 换成null {data.actions.length > 0 ? (<th>操作</th>) : undefined}
其他待更新
相关文章推荐
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- 开源项目“优购网” With React Native and Redux
- React with Visual Studio Code and Webpack
- [Webpack + React] Import CSS Modules with TypeScript and webpack
- Getting Started with AngularJS 1.5 and ES6: part1
- [React] Style the body element with styled-components and "injectGlobal"
- Creating Isomorphic Apps with Node.js, React, and Express
- Getting Started with AngularJS 1.5 and ES6: part2
- [React Native] Installing and Linking Modules with Native Code in React Native
- [Webpack 2] Optimize React size and performance with Webpack production plugins
- How to read out WhatsApp messages with Tasker and react on their content in real time
- Getting Started with AngularJS 1.5 and ES6: part 3
- [React] Create a queue of Ajax requests with redux-observable and group the results.
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
- Getting Started with AngularJS 1.5 and ES6: part4
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- Getting Started with AngularJS 1.5 and ES6: part 6
- [React] Linting React JSX with ESLint (in ES6)
- [Recompose] Handle React Events as Streams with RxJS and Recompose