// 文件命名:switchBtn.jsx (以项目命名规则为准) // 导入所需字段 import React, { Component, PropTypes } from 'react'; // 声明组件名称以及继承关系 class SwitchBtn extends Component { // 构建函数,继承父类 constructor(props) { super(props); // 定义state属性 /* 请慎用setState,因其容易导致重新渲染 既然将数据主要交给了Redux来管理,那就尽量使用Redux管理你的数据和状态state, 除了少数情况外,别忘了shouldComponentUpdate也需要比较state。 */ this.state = { isChecked: props.isChecked }; // 请将方法的bind一律置于constructor /* Component的render里不动态bind方法,方法都在constructor里bind好,如果要动态传参,方法可使用闭包返回一个最终可执行函数。如:showDelBtn(item) { return (e) => {}; }。如果每次都在render里面的jsx去bind这个方法,每次都要绑定会消耗性能。*/ this.onChange = this.onChange.bind(this); } // 内部所需事件 onChange() { console.log(this); this.setState({ isChecked: !this.state.isChecked }); } // 渲染函数 render() { const { isChecked } = this.state; const { id, onClick } = this.props; return ( <div className="switch-btn"> <input id={id} type="checkbox" className="switch-checkbox" checked={isChecked} onChange={this.onChange} /> <label className="switch-label" htmlFor={id} /> </div> ) } } // 定义传参默认值 SwitchBtn.defaultProps = { id: 'switchBtn', isChecked: true }; // 定义传参类型 /* 请只传递component需要的props 传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,也请慎用spread attributes()。 */ SwitchBtn.propTypes = { id: PropTypes.string.isRequired, isChecked: PropTypes.bool }; // 导出组件 export default SwitchBtn; // 关于导入组件 import SwitchBtn from '../components/switchBtn.jsx';