一丶不能摸的狗。
条件：
有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（20~50ms）以后就会停下来，也不叫了。
完成 Dog 组件，当用户点击的时候会执行自身的 bark 和 run 方法。给这个 Dog 组件加上状态 isRunning 和 isBarking，在进行相应的动作的时候设置为 true，停下来的时候设置为 false。。
实现代码：
class Dog extends Component {
constructor () {
super()
this.state={
isRunning:false,
isBarking:false
}
}
bark () {
console.log('bark')
this.setState({ isBarking: true })
setTimeout(() => this.setState({ isBarking: false }), 20)
}
run () {
console.log('run')
this.setState({ isRunning:true })
setTimeout(() => this.setState({ isRunning: false }), 20)
}
handleClickOnDog(){
this.bark()
this.run()
}
render () {
return (<div onClick={this.handleClickOnDog.bind(this)}>DOG</div>)
}
}
二电脑的显示器。
条件：完成两个组件，电脑 Computer 和显示器 Screen。
电脑有个 status 状态表示电脑现在是开还是关的，status 为 on 为开，status 为 off 为关，默认状态为 off。电脑有个按钮，点击可以自由切换电脑的开关状态。
显示器接受一个名为 showContent 的 props，显示器会把它内容显示出来。如果不传入 showContent，显示器显示 “无内容”。
电脑包含显示器，当电脑状态为开的时候显示器显示“显示器亮了”，否则显示“显示器关了”。
实现代码
class Computer extends Component {
constructor(){
super();
this.state={status:'off'};
}
render () {
return (
<div>
<button
onClick={()=>this.setState({status:this.state.status == 'off' ? 'on':'off'})}>
开关
</button>;
<Screen showContent={this.state.status =='off'? '显示器关了':'显示器亮了'} />
</div>
)
}
}
class Screen extends Component {
static defaultProps = {showContent:'无内容'};
render () {
return (
<div className='screen'>{this.props.showContent}</div>
)
}
}
