react js 学习(五)- 组件间抽象
发布时间:2020-12-15 07:32:41 所属栏目:百科 来源:网络整理
导读:mixin 在React中使用mixin import React from 'react';import PureRenderMinxin from 'react-addons-pure-render-mixin';React.createClass({ mixins: [PureRenderMinxin],render(){ render divfoo/div; }}); ES6 Classes与decorator 使用我们推荐的ES6 clas
mixin在React中使用mixinimport React from 'react'; import PureRenderMinxin from 'react-addons-pure-render-mixin'; React.createClass({ mixins: [PureRenderMinxin],render(){ render <div>foo</div>; } }); ES6 Classes与decorator使用我们推荐的ES6 classes形成构建组件时,它并不支持mixin. 高阶组件属性代理import React,{Component} from 'React'; const MyContainer = (WrapperComponent) => class extends Component { render() { render <WrapperComponent {...this.pros} />; } } 组合式组件开发实践组件再分离class SelectInput extends Component { static displayName = 'SelectInput'; render() { const {selectedItem,isActive,onClickHeader,placeholdler} = this.props; const {text} = seletedItem; return ( <div> <div onclick={onClickHeader}> <input type="text" disabled value={text} placeholder={placeholder} /> <Icon className={isActive} name="angle-down" /> </div> </div> ); } } 组件再抽象// 完成SearchInput与List的交互 const searchDecorator = WrapperComponent => { class SearchDecorator extends Component { constructor(props) { super(props); this.handleSearch = this.handleSearch.bind(this); } handleSearch(keyword) { this.setState({ data: this.props.data,keyword,}); this.props.onSearch(keyword); } render(){ const {data,keyword} = this.state; return ( <WrapperComponent {...this.props} data={data} keyword={keyword} onSearch={this.handleSearch} /> ); } } return searchDecorator; } //完成List数据请求 const asyncSelectDecorator = WrapperComponent => { class AsyncSelectDecorator extends Component { componentDidMount(){ const {url,params} = this.props; fetch(url,{params}).then(data => { this.setState({ data,}); }); } render(){ return (<WrapperComponent {...this.props} data={this.state.data} />); } } return AsyncSelectDecorator; } // 组合 const FinalSelector = compose(asyncSelectDecrator,searchDecorator,selectedItemDecorator)(Selector); class SearchSelect extends Component { render(){ return ( <FinalSelector {...this.props}> <SelectInput /> <SearchInput /> <List /> </FinalSelector. ); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- nxp lpc1850 外部flash算法 jlink下载配置 和 内部sram下载
- Oracle 隐含参数查询
- <swift学习之路> UIAlertController的简单使用
- jQuery.getJSON()官方介绍
- c# – 我可以告诉Visual Studio不要更改项目的DPI吗?
- jlink烧写mini2440 nor flash
- Stm32_调试出现 Error:Flash Download Failed-"Cortex-
- 如何初始化UIBezierPath以在swift中绘制圆圈?
- ef-code-first – 我的人际关系错在哪里?由两个依赖实体引
- c++使用win32 api windows下遍历文件夹