编写react组件最佳实践

title: string

}

static defaultProps = {

model: {

id: 0

title: 'Your Name'

}

propTypes和defaultProps是静态属性，应当尽可能在代码的顶部声明。这两个属性起着文档的感化，应当可以或许使浏览代码的开辟者一眼就可以或许看到。如不雅你正在应用react 15.3.0或者更高的版本，应用prop-types，而不是React.PropTypes。你的所有组件，都应当有propTypes属性。

import React, { Component } from 'react' 
 
import { observer } from 'mobx-react' 
 
import { string, object } from 'prop-types' 
 
import ExpandableForm from './ExpandableForm' 
 
import './styles/ProfileContainer.css' 
 
export default class ProfileContainer extends Component { 
 
state = { expanded: false } 
 
static propTypes = { 
 
model: object.isRequired, 
 
title: string 
 
} 
 
static defaultProps = { 
 
model: { 
 
id: 0 
 
}, 
 
title: 'Your Name' 
 
} 
 
handleSubmit = (e) => { 
 
e.preventDefault() 
 
this.props.model.save() 
 
} 
 
handleNameChange = (e) => { 
 
this.props.model.changeName(e.target.value) 
 
} 
 
handleExpand = (e) => { 
 
e.preventDefault() 
 
this.setState({ expanded: !this.state.expanded }) 
 
}

应用class components,当你向子组件传递办法的时刻，须要确保这些办法被调用时有精确的this值。平日会在向子组件传递时应用this.handleSubmit.bind(this)来实现。当然，应用es6的箭头函数写法加倍简洁。

译者注：也可以在constructor中完成办法的高低文的绑定：

constructor() { 
 
this.handleSubmit = this.handleSubmit.bind(this); 	
			 2/9   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　Java反射机制应用实践
            
            引言反射基本p.s: 本文须要读者对反射机制的API有必定程度的懂得，如不雅之前没有接触过的话，建议先看一下官方文档的Quick Start。在应用反射机制之前，起首我们先来看一下若何获取一个对>>>详细阅读


本文标题：编写react组件最佳实践
地址：http://www.17bianji.com/lsqh/35286.html
 1/2    1