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


  • 1

    @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>
      }
    }
    

  • 0

    @tiantiyang 很感谢. 从你的代码分享中学到了 span 提取出来, flag 验证是否存在 的方法


  • 0

    class Notification extends Component {
      render () {
        // TODO
        let n = getNotificationsCount();
        let text;
        if (n > 0) text = "有(" + n.toString() + ")条";
        else text = "没有";
        return <span>{text}未读消息</span>
      }
    }
    

  • 0

    let n = getNotificationsCount()
    return (
      <span>{ n > 0 ? `有(${n})条未读消息` : `没有未读消息` }</span>  
    )

  • 1

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

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

    render()方法只能返回一个JSX, 最好用个标签包一下, 不然就只改内容。


  • 0

    var N = getNotificationsCount()

    return (
      <span>  
        { N > 0 ? '有(' + N + ')条': '没有'}
        未读消息
      </span>
    )

  • 0

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


  • 0

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


  • 0

    //错误几次,没有想到利用好函数的返回值
    class Notification extends Component {
    render () {
    let N =getNotificationsCount();//getNotificationsCount利用函数返回值,定义变量
    const dom1= <span>有({N})条未读消息</span>,//定义两个元素常亮
    dom2= <span>没有未读消息</span>;

    return <div>{ N>0?dom1:dom2}</div>//返回值添加到div中
    }
    }


  • 0

    通过

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

  • 0

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

  • 0

    class Notification extends React.Component {
    render () {
    // TODO
    let N = getNotification();
    return (
    <div>
    {N>0?<span>{N} message</span>:<span>no message</span>}
    </div>
    )
    }
    }

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


  • 0

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


  • 0

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


  • 0

    只要一行即可:

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

登录后回复
 

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