最近陆陆续续学习了一段REACT框架,现在感觉收获到了一些东西,在这里分享一下
它与传统js的区别就是用到了getInitialState,componentDidMount以及其他的一些函数,把你原先的代码改动一下就可以变为有REACT框架的代码了。
使用 getInitialState
生成 state ,我的理解就是生成你需要的东西,正如我代码中的数组,
组件加载: componentDidMount,用于生成DOM结构
现在还在进一步学习中,等这个工程做完就差不多了……
以下代码是写在js中的
var CustomerList=React.createClass({ getInitialState:function(){ return { customers:[] } }, componentDidMount:function(){ var self=this; $.ajax({ url:"../JSON/Customers.json", dataType:"json", async:true, success:function(data){ self.setState({ customers: data.man }) } }) }, handleClick:function(data){ localStorage.setItem('man',data) //this.props.history.pushState(null,'/order') }, render: function() { console.log(this.state.customers) var customers_html= _.map(this.state.customers,function(men){ //生成Dom结构,用的是_,map console.log(men) return ( <li className='apper'> <div className='css_button_style' onClick={this.handleClick.bind(this,men)}>{men}</div> </li> ) },this) return ( <div> <div className='order'> <li className='apper'> <button className='back'>back</button>选人</li> </div> <div className='distan'> {customers_html} </div> </div> ) } }); ReactDOM.render( //获取Dom节点,显示在html中 <CustomerList/>, document.getElementById("example") );