标签：它的 datawit hub ber const onclick str 附件 lin
1、 ProtoTypes：为每个传入你的组件的属性添加类型检查
一般类型：
ProtoTypes.array
ProtoTypes.bool
ProtoTypes.func
ProtoTypes.number
ProtoTypes.object
ProtoTypes.string
ProtoTypes.any
用法：
import PropTypes from ‘prop-types‘; DetailPanel.propTypes = { // isRequired表示必须传入的参数 data: PropTypes.object.isRequired, };
2、 defaultProps：表示当props未传入时，设置的默认值。
用法如下：
DetailPanel.defaultProps = {
street: true,
attached: false,
streetImg: img1,
attachImg: img2,
column: null,
};
3、props和state的区别
this.props：存储的是从父级传递过来的只读数据。它属于父级，并且不能被它的子元素改变，这个数据应该被认为是不可改变的。
this.state：存储的数据是组件私有的，状态不应从组件外部访问，除非父组件添加或设置了该组件的初始状态。它能被组件修改。当state更新后组件会自会自动更新渲染。
注明：最好用props，state为有状态，最好不用。
在ES6中，初始化（在构造函数中）及设置state可用如下方式：
//在构造函数中 this.state = { Img:props.img, data:props.data, } //在构造函数外部设置state this.setState({ Img:props.img, data:props.data, } //在构造函数中 let stateImg = props.streetImg; let stateImg2 = props.attachImg; let stateData = this.handleDataWithColumn(); this.state = {stateImg, stateData, stateImg2};
4、 组件内创建函数
格式如下：
func = (arg1,…) => { //… }; handleDataWithColumn= (trueData,column) =>{ //… }; //当参数来自组件，可如下使用 handleDataWithColumn = () => { // get attributes of the object const trueData = this.props.data; const column = this.props.column; // trueData、column… }
5、 遍历数组循环设置标签（在render函数中，并且需要设置key）
注：当定义了const ex = …;
使用的时就是 ex.map(data) => (…)，注明不添加{}
//dataSource:[{‘key’:XX,’name’:XX,’info’:XX},…] <table className={styles.tableDetails}> { this.props.dataSource.map((data) =>( <tr key={data.key}> <td className={styles.tableName}>{data.name}</td> <td className={styles.tableInfo}>{data.info}</td> </tr> )) } </table>
6、条件渲染
条件渲染可以通过 if…else… 语句，三目运算符语句，还可以通过jsx自身的内嵌表达式 Logical && Operator 逻辑&&模块。
官网：https://facebook.github.io/react/docs/conditional-rendering.html
博客推荐：http://www.cnblogs.com/hahazexia/p/6402468.html?utm_sour..
我常用的是第三种。
{this.props.attached &&
<div className={styles.attachmentLinkWrap}>
<a className={styles.attachmentLink}
onClick={this.props.handlerAttachClick}>
查看附件
</a>
</div>
}
注：后续会继续更新关于 React生命周期和单向流动的学习总结
标签：它的 datawit hub ber const onclick str 附件 lin
原文地址：http://www.cnblogs.com/zhangxiaoshuang/p/6917589.html
