#7 打开和关闭电脑


  • 0
    administrators

    完成两个组件,电脑 Computer 和显示器 Screen

    电脑有个 status 状态表示电脑现在是开还是关的,statuson 为开,statusoff 为关,默认状态为 off。电脑有个按钮,点击可以自由切换电脑的开关状态。

    显示器接受一个名为 showContentprops,显示器会把它内容显示出来。如果不传入 showContent,显示器显示 “无内容”。

    电脑包含显示器,当电脑状态为开的时候显示器显示“显示器亮了”,否则显示“显示器关了”。


  • 0

    有没有人做完了看一下,我做的一直有点问题


  • 0
    administrators

    可以贴一下你的答案吗?看看是哪里出了问题。@dcbryant


  • 1

    可以啊。

    class Computer extends Component {
          constructor(props){
                  super(props)
                  this.state = {
                      status:false
                      content:'显示器关了'
                  }
              }
          handleClick(){
              this.setState({
                  status:!this.state.status
              })
              if(this.state.status){
                  this.setState({
                      content:'显示器亮了'
                  })
              }else{
                  this.setState({
                      content:'显示器灭了'
                  })
              }
          }
          render(){
              return(
                  <div>
                      <button onClick={this.handleClick.bind(this)}>开关</button>
                      <Screen showContent={this.state.content} />
                  </div>
              )
          }
      }
      class Screen extends Component {
          constructor(props){
              super(props)
              this.state = {
                  content:'无内容'
              }
          }
          render () {
              return (
                  <div className='screen'>
                      {this.state.content = this.props.showContent ? this.props.showContent : this.state.content }
                  </div>
              )
          }
      }
    

  • 1
    administrators

    @dcbryant#7 打开和关闭电脑 中说:

              this.state = {
                  status:false
                  content:'显示器关了'
              }
    

    你这里少了个逗号,最好能在本地先跑一下哈。因为是后端测题,有些错误信息不会特别的完全。本地跑就能够避免这些错误了。


  • 0

    我加了,好像还是错的。
    主要是在浏览器跑了,辨认不知错误


  • 0
    administrators

    @dcbryant 一般来说本地跑正确了提交上来就是正确的


  • 0

    嗯嗯,多谢,我再试试


  • 0

    class Computer extends Component {
      constructor(){
        super()
        this.changleClick=this.changleClick.bind(this)
        this.state={
          status: 'off'
        }
      }
    
      changleClick(){
        this.setState({
          status:(this.state.status==='off'?'on':'off')
        })
      }
      render () {
        return (
          <div>
            <Screen showContent={this.state.status}/>
            <button onClick={this.changleClick} >开关</button>
          </div>
        )
      }
    }
    class Screen extends Component {
      componentDidMount(){
        this._reLoad()
        this.interval = setInterval(() => this._reLoad(), 10);
      }
      _reLoad(){
        const screenInfo= document.querySelector('.screen')
        if(this.props.showContent===null){
            screenInfo.innerHTML="无内容"
        }else if(this.props.showContent==='on'){
          screenInfo.innerHTML='显示器亮啦'
        }else if(this.props.showContent==='off'){
          screenInfo.innerHTML='显示器关啦'
        }
      }
    
      componentWillUnmount() {
        clearInterval(this.interval);
      }
      render () {
        return (
          <div className='screen'></div>
        )
      }
    }
    Screen.propTypes={
      showContent:PropType.string
    }
    

  • 0

    提示说innerHTML为null


  • 0
    administrators

    @maroon 在 React 里面尽量避免使用 DOM API。这里不需要操作 DOM 元素


  • 0

    @胡子大哈 那有什么能用的?能说一下吗?


  • 0
    administrators

    @maroon 通过 props 把数据传递入 Screen。如果需要的话,可以提供参考答案。


  • 0

    @胡子大哈 还是别啦,知道思路就可以,谢啦


  • 0

    @胡子大哈 那如果props如果没有传给Screen数据,那该在哪里做处理?


  • 0
    administrators

    @maroon 可以用 defaultProps


  • 0

    @胡子大哈 我用啦![alt text](0_1494602306351_upload-30d5aa54-f7dd-4628-9619-4be851e32584 image url)


  • 0
    administrators

    @maroon defaultProps 的使用方式不是这样的哈。可以参考一下小书的章节或者查阅 defaultProps 的相关内容。

    它只是一个静态类属性,不能通过实例的方式操作它。一般来说我们不需要获取 defaultProps,它是给 React 自己处理的。


  • 0

    @胡子大哈 嗯,我去看看小书


  • -1

    @dcbryant

    class Computer extends Component {
      
      constructor(){
        super()
        this.state = {status:'off'}
      }
      
      open(){
        this.setState(
          {status: this.state.status == 'off' ? 'on' : 'off'}
        )
      }
      
      render () {
        return (
          <div>
            <button onClick={this.open.bind(this)}>开关</button>
            <Screen showContent={this.state.status == 'off' ? '显示器关了' : '显示器亮了'} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      
      static defaultProps = {showContent:"无内容"}
      
      render () {
        
        const showContent = this.props.showContent 
        
        return (
          <div className='screen'>{showContent}</div>
        )
      }
    }
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待