初用 react 容易踩的坑

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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

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

在组件上传递 onClick 等特殊属性

接着上面的例子，把myComp改成MyComp，此时又容易写出如下代码

<MyComp onClick={func}/>

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

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

var MyComp = React.createClass({
  func:function(){
     //do Something
  },
  render: function() {
    return <div onClick={this.func.onClick}>Hello world</div>;
  }
});

如果是用ES6的写法，则需要

直接给 input value 设置一个 state

<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 容易踩的坑 的全部内容， 来源链接： utcz.com/z/264753.html

回到顶部