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


  • 0

    提交下我的代码

    // 函数 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')
    )


  • 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>)
    } 
    }


登录后回复
 

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