#2 用 React.js 构建未读消息组件


  • 2
    administrators

    使用 React.js 构建一个未读消息组件 Notification

    通过 getNotificationsCount() 来获取未读消息的数量 ,如果有未读消息 N 条,而且 N > 0,那么 Notification 组件渲染显示:
    a

    <span>有(N)条未读消息</span>
    

    否则显示:

    <span>没有未读消息</span>
    

    (你只需要完成组件部分,不需要调用 ReactDOM)


  • 0

    @胡子大哈
    0_1495018240789_upload-1d97e898-7091-4fa9-8006-04817db78039

    这个我本地测试返回结果是正确的,提交时显示是当N=1时,返回没有未读消息;能帮我解答一下吗?


  • 0
    administrators

    @yangqiang5156 注意题目这句话,N 需要通过函数获取:

    通过 getNotificationsCount() 来获取未读消息的数量

    应该是 N = getNotificationsCount(),然后把 N 进行渲染


  • 0

    可以了,谢谢你啦!


  • 0

    @胡子大哈 0_1496311131928_upload-3c86346d-9139-45d7-ab97-e938194c3089

    能不能指点一下错在哪里?


  • 0

    @lunarsprite getNotificationsCount() 函数获取的是 N 的值


  • 1

    提交下我的代码

    // 函数 getNotificationsCount 已经可以直接调用
    
    class Notification extends Component {
      render () {
        const N = getNotificationsCount()
        return(
          <div>
            {N>0?<span>有({N})条未读消息</span>:<span>没有未读消息</span>}
          </div>
          )
      }
    }
    

  • 0

    试试俺的,虽然可以,有点疑问
    //这里有(' + N + ')条是写在{...}中的,显示N只能用'+N+'吗?

    class Notification extends Component {
      render () {
        // TODO
        const N=getNotificationsCount();
        return (
          <span>{N > 0 ? '有(' + N + ')条未读消息' : '没有未读消息'}</span>
        )
      }
    }
    

  • 0

    class Notification extends Component {
      
      render () {
      let N=getNotificationsCount();
      let span1=<span>有({N})条未读消息</span>;
      let span2=<span>没有未读消息</span>;
        return(
          <div>
          {N>0?span1:span2}
          </div>
        )
      }
    }
    

  • 0

    class Notification extends Component {
      getNotificationsCount(count){
        var isEmpty = count <= 0 ? true : false;
        var msgs = <span>有({count})条未读消息</span>,
            empty = <span>没有未读消息</span>;
        return isEmpty ? empty : msgs;
      }
      render() {
        
        return (<div>{this.getNotificationsCount(1)}</div>)
        // TODO
      }
    }
    ReactDOM.render(
      <Notification />, document.getElementById('root')
    )
    

  • 0

    @lunarsprite n要换成消息的条数


  • 0

    @BigJane

    // 函数 getNotificationsCount 已经可以直接调用
    
    class Notification extends Component {
      render () {
        // TODO
        let N = getNotificationsCount()
        return (
            <div>
              <span>{N>0?`有(${N})条未读消息`:`没有未读消息`}</span>
            </div>
          )
      }
    }
    

  • 0

    class Notification extends Component {
    render() {
    let count = getNotificationCount()
    return (
    count > 0 ? <span>有{count}条未读消息</span>
    : <span>没有未读消息</span>
    )
    }
    }
    function getNotificationCount() {
    // the code to get N
    return N;
    }
    ReactDom.render(
    <Notification />,
    document.getElementById('root')
    )


  • 0

    @lunarsprite

    class Notification extends Component {
      render () {
        var flag = getNotificationsCount();
        return (
          <span>{ flag && flag > 0 ? '有(' + flag + ')条未读消息' : '没有未读消息'}</span>
        )
      }
    }
    

  • 0

    class Notification extends Component {

    render () {
    const N = getNotificationsCount();
    // TODO
    return (
    <span>{N > 0 ? '有' + '(' + N + ')' + '条' : '没有'}未读消息</span>
    )
    }
    }


  • 0

    class Notification extends Component {
    render () {

    const N = getNotificationsCount();
    return (
      <span>{N>0? "有("+N+")条" : "没有"}未读消息</span>
    )
    

    }
    }


  • 0

    // 函数 getNotificationsCount 已经可以直接调用

    class Notification extends Component {
    render () {
    // TODO
    let N = getNotificationsCount();
    const message1 = <span>有({N})条未读消息</span>;
    const message2 = <span>没有未读消息</span>
    return(
    <div>
    {N>0? message1:message2}
    </div>
    )
    }
    }

    // ReactDOM.render(
    // <Notification/>,
    // document.getElementById('root')
    // )


  • 0

    @fingertip 我和你写的一模一样.....为什么你的可以通过我的通过不了。。。。


  • 0

    // 函数 getNotificationsCount 已经可以直接调用
    
    class Notification extends Component {
      render () {
        let count = getNotificationsCount();
        // TODO
        return <span>{count>0?'有(' + count + ')条':'没有'}未读消息</span>
      }
    }
    

登录后回复
 

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