编写react组件最佳实践

of JS function hoisting)

// You want these to be as visible as possible

ExpandableForm.propTypes = {

onSubmit: func.isRequired,

expanded: bool,

onExpand: func.isRequired

}

// Destructure props like so, and use default arguments as a way of setting defaultProps

function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {

const formStyle = expanded ? { height: 'auto' } : { height: 0 }

return (

{children}

<button onClick={onExpand}>Expand</button>

</form>

)

}

// Wrap the component instead of decorating it

export default observer(ExpandableForm)

在JSX中应用前提断定(Conditionals in JSX)

有时刻我们须要在render中写很多的断定逻辑，以下这种写法是我们应当要避免的：

今朝有一些库来解决这个问题，然则我们没有惹人其他依附，而是采取了如下方法来解决：

这里我们采取急速履行函数的方法来解决问题，将if语句放到急速履行函数中，返回任何你想返回的。须要留意的是，急速履行函数会带来必定的机能问题，然则对于代码的可读性来说，这个影响可以忽视。

同样的，当你只欲望在某种情况下衬着时，不要这么做：

{ 
  isTrue 
   ? <p>True!</p> 
   : <none/> 
}

而应当这么做：

{ 
 
isTrue && 
 
<p>True!</p> 
 
}

(全文完)

【编辑推荐】

前端开辟js运算符单竖杠“|”的用法和感化及js数据处理
前端一站式异常监控捕获筹划
Node.js对于Java开辟者而言是什么？
2017年前端开辟对象趋势
构建React.js应用的十佳UI框架，都在这了！

【义务编辑：枯木 TEL：（010）68476606】

import React from 'react' 
import { observer } from 'mobx-react' 
import { func, bool } 	
			 8/9   首页 上一页 6 7 8 9 下一页 尾页	
			

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


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