<p dangerouslySetInnerHTML={{__html: string}}/>//将字符串变成html可解析型,不推荐,容易产生xss漏洞
.bind(this,99,66)//后面加入需要传入的参数
限制传入的属性:
MyComponent.propTypes = {//在组件类的外面
属性1:React.propTypes.array,//可传可不传
属性2:React.propTypes.number.isRequired//必须传入
}
MyComponent.defaultProps = {属性1:值}//设置默认的属性
ref获取原生节点进行相关操作
<button ref={"button"}>点击一下<button> //this.refs.button.style.color=blue //在render之后才能获取到refs
mixins(es6不推荐)
//不同组件之间共用代码功能 npm install --save react-mixin@2 import ReactMixin from 'react-mixin' import Mixin from 'Mixin' //在组件类外,相似限制属性 ReactMixin(MyComponent.protoType,Mixin) //使用时 Mixin.log(); 附: const Mixin={ componentDidMount(){//可以设置自己的生命周期 } log(){ } } export default Mixin;
内联样式与jsx结合
const style = { header: { paddingBottom:(this.state.minheader)?"5px":"10px", } }
css模块化
:global(.btn){color:red}//全局可用
标准css转化react的css工具
ant design
npm install antd import {Button} from 'antd'
react-router(@3版本,目前最新4有区别)
//定义页 import {Router,Route,hashHistory} from 'react-router' <Router history={hashHistory}> <Route component={Index} path={'/'}> <Route component={Details} path={'/details'}></Route> </Route> <Route component={Footer} path={'/footer'}> </Route> </Router> //嵌套关系(父组件可以通过this.props.children使用子组件)和平行关系 //使用页 import {Link} from 'react-router' <Link to={'/'}>链接转移<Link> <Link to={'/details'}>链接转移<Link> <Link to={'/footer'}>链接转移<Link> //参数传递 <Route component={Footer} path={'/footer/:type'}> //在Footer组件中就可以通过this.props.parmas.type来使用参数 //可以获取url的参数
移动端适配
npm install react-responsive import MediaQuery from 'react-responsive' <div> <MediaQuery query={'(min-device-width:1224px)'}> <PCIndex/> </MediaQuery> <MediaQuery query={'(max-device-width:1224px)'}> <MobileIndex/> </MediaQuery> </div>
阻止默认行为
e.preventDefault(); //一般用户阻止button向form提交数据
css超过长度...
whiteSpace:'nowrap' overflow:'hidden' textOverflow:'ellipsis'
优化(雅虎军规35条)
//YSnow插件检测雅虎军规
上拉刷新加载数据
import Tloader from 'react-touch-loader';
组件库
chart.js react-toolbox react-icons