初用react容易踩的坑

標籤：

此文章同步串連： https://github.com/p2227/p2227.github.io/issues/3# 初用react容易踩的坑## 自訂群組件忘記大寫第一個字母 ```javascriptvar myComp = React.createClass({  render: function() {    return <div>Hello world</div>;  }});ReactDOM.render(<myComp  />, mountNode);```如上代碼則不會渲染出組件，因為自訂群組件的第一個字母必須要大寫## 在組件上傳遞onClick等特殊屬性接著上面的例子，把myComp改成MyComp，此時又容易寫出如下代碼```javascript<MyComp onClick={func}/>```沒做其他處理的話，點擊該組件是不會生效的，因為自訂群組件中的所有屬性都只會作為一個一般的屬性去處理，需要在組件內部把該屬性進行處理才會生效，即```javascriptvar MyComp = React.createClass({  render: function() {    return <div onClick={this.props.onClick}>Hello world</div>;  }});ReactDOM.render(<MyComp onClick={func} />, mountNode);```其他className、htmlFor等屬性也類似處理## 濫用this.func.bind利用`React.createClass`建立的組件中，事件的調用函數是不需要加上.bind(this)的，除非要傳參數```javascriptvar MyComp = React.createClass({  func:function(){     //do Something  },  render: function() {    return <div onClick={this.func.onClick}>Hello world</div>;  }});```如果是用ES6的寫法，則需要## 直接給input value設定一個state```javascript<input value={this.state.text} />```如果像上面這樣寫，則input是不可修改的，有兩種解決方案。如果是要一次性設定一個值，用`defaultValue`，如果是要雙向繫結，則可以用`ReactLink`，具體官方都有串連 defaultValue :  https://facebook.github.io/react/docs/forms.html ReactLink : http://facebook.github.io/react/docs/two-way-binding-helpers.html

初用react容易踩的坑