react有趣的试题

一丶不能摸的狗。

条件：

有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（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>
    )
  }
}