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


  • 0

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

    class Notification extends Component {
    render () {
    // TODO
    const msgCount = getNotificationsCount();
    const noMsg = <span>没有未读消息</span>;
    const haveMsg = <span>有({msgCount})条未读消息</span>;

    return(
      <div>
     {msgCount>0 ? haveMsg : noMsg}
      </div>
      )
    

    }
    }


  • 0

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

    class Notification extends Component {
    render () {
    // TODO
    const msgCount = getNotificationsCount();
    const noMsg = <span>没有未读消息</span>;
    const haveMsg = <span>有({msgCount})条未读消息</span>;

    return(
      <div>
     {msgCount>0 ? haveMsg : noMsg}
      </div>
      )
    

    }
    }


  • 0

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


  • 0

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


  • 0

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

    class Notification extends Component {
    render () {
    return <span>{getNotificationsCount() >0? 有(${getNotificationsCount() })条未读消息 : '没有未读消息'}</span>
    }
    }


  • 0

    @zephyrJS 原来如此, 我按 '' 直接没用,需要这样才可以,好扎心,不应该都可以的吗


  • 0

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


  • 0

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

  • 0

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

  • 0

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

  • 0

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


  • 0

    //我感觉我这么写好没灵魂啊
    class Notification extends Component {
    render () {
    // TODO
    let count = getNotificationsCount()||0;
    return (
    <span>
    {count&&count>0?"有("+count+")条":"没有"}未读消息
    </span>
    )
    }
    }


  • 0

    问一下这样子为什么在N=0时候会输出两个没有未读消息呢

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


  • 0

    0_1541559484861_upload-b061c264-43c3-40d5-82b7-1787998eea62

    這是錯在了哪裏?


  • 0

    @changyuanchn 後面是絕對沒有空格的,很確認


  • 1

    
    class Notification extends Component {
      render () {
        // TODO
        let noticeCount = getNotificationsCount()
        return <span>{noticeCount ? `有(${noticeCount})条未读消息`:"没有未读消息"}</span>
      }
    }
    

  • -1

    0_1542609867108_TIM截图20181119144403.png


  • 0

    0_1543200657685_QQ截图20181126105026.png


  • 0

    @ScriptOJ

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

  • 0

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

登录后回复
 

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