编写react组件最佳实践

<h1>{title}</h1>

<input

type="text"

value=http://developer.51cto.com/art/201705/{model.name}

onChange={this.handleNameChange}

placeholder="Your Name"/>

</div>

</ExpandableForm>

)

}

对于有很多props的组件来说，应当像上述写法一样，将每个属性解构出来，且每个属性零丁一行。

装潢器(Decorators)

@observer 
 
export default class ProfileContainer extends Component {

如不雅你正在应用类似于mobx的状况治理器，你可以按照上述方法描述你的组件。这种写法与将组件作为参数传递给一个函数效不雅是一样的。装潢器(decorators)是一种异常灵活和易读的定义组件功能的方法。我们应用mobx和mobx-models来结合装潢器进行应用。

如不雅你不想应用装潢器，可以按照如下方法来做：

class ProfileContainer extends Component { 
 
// Component code 
 
} 
 
export default observer(ProfileContainer)

避免向子组件传入闭包，如下：

import React from 'react' 
import { observer } from 'mobx-react' 
import { func, bool } from 'prop-types' 
 
import './styles/Form.css' 
ExpandableForm.propTypes = { 
  onSubmit: func.isRequired, 
  expanded: bool, 
  onExpand: func.isRequired 
} 
function ExpandableForm(props) { 
  const formStyle = props.expanded ? {height: 'auto'} : {height: 0} 
  return ( 
    <form style={formStyle} onSubmit={props.onSubmit}> 
      {props.children} 
      <button onClick={props.onExpand}>Expand</button> 
    </form> 
  ) 
}

<input 
            type="text" 
            value=http://developer.51cto.com/art/201705/{model.name	
			 4/9   首页 上一页 2 3 4 5 6 7 下一页 尾页	
			

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


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