运行效果
第一版
import React, { Component } from 'react';
import SubLable from './SubLabel'
class MyLabel extends Component {
render() {
return (
<SubLable/>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
class SubLabel extends Component {
constructor(){
super();
this.onFun = this.onFun.bind(this);
}
onFun(){
alert('onfun');
}
render() {
return (
<div>
dddddggg
<button onClick={this.onFun}>button</button>
</div>
);
}
}
export default SubLabel;
import App from './MyTest/MyLabel'
ReactDOM.render(<App />, document.getElementById('root'));
第二版
import React, { Component } from 'react';
import SubLable from './SubLabel'
// 复杂组件
class MyLabel extends Component {
constructor(){
super();
this.onFun = this.onFun.bind(this);
}
onFun(){
alert('onfun');
}
render() {
return (
<SubLable text="text" onfun={this.onFun}/>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
render() {
const {text,onfun} = this.props;
return (
<div>
{text}
<button onClick={onfun}>{text}</button>
</div>
);
}
}
export default SubLabel;
第三版:使用context传递数据
import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'
// 复杂组件
class MyLabel extends Component {
constructor(){
super();
this.onFun = this.onFun.bind(this);
}
onFun(){
alert('onfun');
}
render() {
return (
<Provider store={store}>
<SubLable onfun={this.onFun}/>
</Provider>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 傻瓜组件
class SubLabel extends Component {
// eslint-disable-next-line no-useless-constructor
constructor(props, context){
super(props, context);
}
render() {
const {onfun} = this.props;
return (
<div>
{this.context.store.text}
<button onClick={onfun}>{this.context.store.text}</button>
</div>
);
}
}
SubLabel.contextTypes = {
store: PropTypes.object
}
export default SubLabel;
import {Component} from 'react';
import PropTypes from 'prop-types';
class Provider extends Component {
constructor(props){
super(props);
this.store = props.store;
}
getChildContext() {
return {
store: this.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: PropTypes.object
};
export default Provider;
const Store = {
'text': 'text',
};
export default Store;
第四版:"..."表达式实验
import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'
const onFunF = () =>({
onfun:()=> { alert("onfun");}
})
// 复杂组件
class MyLabel extends Component {
constructor(){
super();
this.onFun = this.onFun.bind(this);
}
onFun(){
alert('onfun');
}
render() {
return (
<Provider store={store}>
{/* <SubLable onfun={this.onFun}/> */}
<SubLable {...onFunF()}/>
</Provider>
);
}
}
export default MyLabel;
第五版
import React, { Component } from 'react';
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'
const onFunF = () =>({
onfun:()=> { alert("onfun");}
})
const onDataF =()=>({
text:'text',
})
// 复杂组件
class MyLabel extends Component {
constructor(props, context){
super(props, context);
}
render() {
return (
<Provider store={store}>
{/* <SubLable onfun={this.onFun}/> */}
<SubLable {...onDataF()} {...onFunF()}/>
</Provider>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
render() {
const {onfun,text} = this.props;
return (
<div>
{text}
<button onClick={onfun}>{text}</button>
</div>
);
}
}
export default SubLabel;
第六版:高阶组件实验前奏
import React, { Component } from 'react';
import SubLable from './MSubLabel'
import store from './Store'
import Provider from './Provider'
// 复杂组件
class MyLabel extends Component {
constructor(props, context){
super(props, context);
}
render() {
return (
<Provider store={store}>
<SubLable />
</Provider>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
import SubLable from './SubLabel'
import PropTypes from 'prop-types';
const onFunF = () =>({
onfun:()=> { alert("onfun");}
})
const onDataF =(store)=>({
text:store.text,
})
// 傻瓜组件
class MSubLabel extends Component {
constructor(props, context){
super(props, context);
}
render() {
return (
<SubLable {...onDataF(this.context.store)} {...onFunF()}/>
);
}
}
MSubLabel.contextTypes = {
store: PropTypes.object
}
export default MSubLabel;
import React, { Component } from 'react';
// 傻瓜组件
class SubLabel extends Component {
render() {
const {onfun,text} = this.props;
return (
<div>
{text}
<button onClick={onfun}>{text}</button>
</div>
);
}
}
export default SubLabel;
const Store = {
'text': 'text',
};
export default Store;
import {Component} from 'react';
import PropTypes from 'prop-types';
class Provider extends Component {
constructor(props){
super(props);
this.store = props.store;
}
getChildContext() {
return {
store: this.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: PropTypes.object
};
export default Provider;
第七版:高阶组件
import React, { Component } from 'react';
//import SubLable from './MSubLabel'
import SubLable from './SubLabel'
import store from './Store'
import Provider from './Provider'
// 复杂组件
class MyLabel extends Component {
constructor(props, context){
super(props, context);
}
render() {
return (
<Provider store={store}>
<SubLable />
</Provider>
);
}
}
export default MyLabel;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 傻瓜组件
class SubLabel extends Component {
render() {
const {onfun,text} = this.props;
return (
<div>
{text}
<button onClick={onfun}>{text}</button>
</div>
);
}
}
const onFunF = () =>({
onfun:()=> { alert("onfun");}
})
const onDataF =(store)=>({
//text:store.text,
text:'text',
})
const connect = (onDataF,onFunF) =>{
return function(Sub){
class MSubLabel extends Component {
constructor(props, context){
super(props, context);
}
render() {
const store = this.context.store;
const newProps={
...this.props,
...onDataF(store),
...onFunF()
}
return (
<Sub {...newProps} />
);
}
};
MSubLabel.contextTypes = {
store: PropTypes.object
}
return MSubLabel;
}
}
//export default SubLabel;
export default connect(onDataF,onDataF)(SubLabel);
const Store = {
'text': 'text',
};
export default Store;
import {Component} from 'react';
import PropTypes from 'prop-types';
class Provider extends Component {
constructor(props){
super(props);
this.store = props.store;
}
getChildContext() {
return {
store: this.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: PropTypes.object
};
export default Provider;
弹窗弹不出来