几个React+mobx入门练习--饭叔的前端零基础入门教程 (4)

1. 用mobx改变组件状态
   有三个按钮和一个DIV，点击按钮后在DIV中显示对应的文字。
   
   

   点击“悟空”按钮后
   
   ![点击“悟净”按钮后](http://upload-images.jianshu.io/upload_images/45703-f41d14c269bcce60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

@observer
export default class Ex1 extends React.Component {
    render() {
        const store = this.props.store;
        return (

            store.setName("悟空")}>悟空
            store.setName("悟净")}>悟净
            store.setName("悟能")}>悟能
            
{store.name}
        
)
    }
}

2. 在父组件中用Prop控制子组件是否显示
   构造组件,含有3个子组件
   （图片来源:https://www.poocg.com/cynthiaxing）
   
   
   
   
   
   
   
   
   
   展示
   展示
   展示
   例如：
   
   

@observer
export default class People extends React.Component {
    static defaultProps: IPeople = {
        name:"悟空"
    };
    render() {
        const Comps={
            "悟空":Wukong,
            "悟能":Wuneng,
            "悟净":Wujing
        };
        const {name}=this.props;
        const NullComp=()=>null;
        const Comp=Comps[name]||NullComp;
        return ()
    }
}

3. 在父组件中用Prop控制子组件的样式
   构造组件,是一个100px * 100px的方块,方块的背景色由color决定，中间显示颜色值
   如：
   

   
   
   

   ex3.png
   
   
   
   
   

   ex3_2.png

interface IColorBox {
    color: string
}
@observer
export default class ColorBox extends React.Component {
    static defaultProps: IColorBox = {
        color:"blue"
    };
    render() {
        const color = this.props.color;
        const style={
            width:100,
            height:100,
            textAlign:"center",
            backgroundColor:color
        };
        return (
{color}
)
    }
}

4.综合运用
以按钮切换图片显示

以按钮切换图片显示