學習React不是一蹴可幾的事情,入門似乎也沒那麼簡單。但我覺得這一切都是值得的。以下就讓我們來閱讀這篇文章吧
這是我在學習React中的一些心得,希望能夠幫助大家!
這是一個簡單的使用者管理系統,擁有增加、刪除、變更的功能。
樣式
先從最簡單的樣式講起吧
React可以使用兩種樣式,一種是普通的css,一種是在React中定義的樣式。
普通的css樣式,透過className=""來引用
<!--普通css样式--> <style> .style_2{ background-color: #6699ff; font-size: 24px; padding: 3px 5px 3px 5px; color: #FFFFFF; } .Separate{ height: 10px; } </style>
<span className="style_2">账号:</span>
React中定義的樣式,透過style={}來引用
//React的css样式 var style_1={ color:'#9900ff', padding:3, }
<h1 style={style_1}>落叶丶Fly的React小站</h1>
元件
建構元件(名字隨意起,首字母要大寫),我這裡建構了一個叫Board的元件,然後透過getInitialState進行初始化。透過ReactDOM.render載入到html頁面中。如果ReactDOM.render中有多個元件或標籤,則需要用一個p標籤來包裹。
var Board = React.createClass({ //初始数据 getInitialState: function(){ return ({ comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}] }); },
//初始化 eachComment: function(text,i){ return (); },
<span className="style_2">账号:</span> {text.account}
用户名: {text.name}
ReactDOM.render( //需要用一个p标签来包裹<h1 style={style_1}>落叶丶Fly的React小站</h1>
, document.getElementById('container') );
props和state
#state:React 把元件看成是一個狀態機(State Machines)。透過與使用者的交互,實現不同狀態,然後渲染 UI,讓使用者介面和資料保持一致。 React 裡,只需更新元件的 state,然後根據新的 state 重新渲染使用者介面(不要操作 DOM)。
props:state 和props 主要的差異在於 props 是不可變的,而state 可以根據與使用者互動來改變。這就是為什麼有些容器元件需要定義 state 來更新和修改資料。而子元件只能透過 props 來傳遞資料。
函數
React中的button點擊事件和普通的JavaScript差不多,但要注意onClick中的C要大寫,否則會報錯。本文透過按鈕點擊來更改editing的布林值,用setState函數進行更新,從而在普通模式與編輯模式中切換。 (想看更多就到PHP中文網React參考手冊欄位學習)
<button onClick={this.edit}>编辑</button>
//编辑 edit: function(){ this.setState({editing: true}); }, //保存 save: function(){ var val = this.refs.new_account.value; var val1 = this.refs.new_name.value; console.log("拿到的值是: " + val+val1); this.props.updateCommentText(val,val1,this.props.index) this.setState({editing: false}); },
//普通模式 renderNormal:function(){ return (
{this.props.children}
<button onClick={this.edit}>编辑</button> ); }, //编辑模式 renderForm:function(){ let children = this.props.children return () }, //模式更改 render: function (){ //console.log(this.props) if(this.state.editing){ return this.renderForm(); }else{ return this.renderNormal(); } }
全部程式碼
React-Template <!--普通css样式--> <style> .style_2{ background-color: #6699ff; font-size: 24px; padding: 3px 5px 3px 5px; color: #FFFFFF; } .Separate{ height: 10px; } </style>
這篇文章到這就結束了(想看更多就到PHP中文網React使用手冊欄位中學習),有問題的可以在下方留言提問。
以上是react到底怎麼學? react的學習之路詳細介紹(內附完整實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!