初用react容易踩的坑

标签：

此文章同步连接： https://github.com/p2227/p2227.github.io/issues/3

# 初用react容易踩的坑

## 自定义组件忘记大写第一个字母 

```javascript
var myComp = React.createClass({
  render: function() {
    return <div>Hello world</div>;
  }
});
ReactDOM.render(<myComp  />, mountNode);
```

如上代码则不会渲染出组件，因为自定义组件的第一个字母必须要大写


## 在组件上传递onClick等特殊属性
接着上面的例子，把myComp改成MyComp，此时又容易写出如下代码

```javascript
<MyComp onClick={func}/>
```

没做其他处理的话，点击该组件是不会生效的，因为自定义组件中的所有属性都只会作为一个一般的属性去处理，需要在组件内部把该属性进行处理才会生效，即

```javascript
var 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)的，除非要传参数

```javascript
var 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容易踩的坑

标签：

原文地址：http://www.cnblogs.com/p2227/p/5140585.html