V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
myljs
V2EX  ›  问与答

在 JSX 中,始终输出标签 A,在有变量 b 有值的时候,需要输出标签 B,你会怎么写这个逻辑?

  •  
  •   myljs · 2019-08-28 06:37:53 +08:00 · 1679 次点击
    这是一个创建于 1675 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求 RT,可能会有下面三种写法:

    1:

    function Demo() {
      if (b) {
        return <>
          <A />
          <B />
        </>
      }
    
      return <A />
    }
    

    2:

    function Demo() {
      return <>
        <A />
        {b ? <B /> : null} // or {b && <B />}
      </>
    }
    

    3:

    function Demo() {
      let result = [<A key="a" />];
      if (b) {
        result.push(<B key="b" />);
      }
    
      return result;
    }
    

    你会怎么选择?或者用什么其他的方法?以及为什么选择这样写?

    14 条回复    2019-08-28 18:39:51 +08:00
    Cbdy
        1
    Cbdy  
       2019-08-28 06:40:53 +08:00 via Android
    {b && <B />}
    官方推荐
    fuermosi777
        2
    fuermosi777  
       2019-08-28 06:51:20 +08:00
    https://reactjs.org/docs/conditional-rendering.html
    "it is up to you to choose an appropriate style based on what you and your team consider more readable."
    Mutoo
        3
    Mutoo  
       2019-08-28 06:59:26 +08:00
    其他的方法:
    <Notification message={message} />

    Notification = ({message})=>{
    if(!message) return null;
    /* render message */
    }
    topgrd
        4
    topgrd  
       2019-08-28 07:31:04 +08:00 via iPhone
    b && <B />
    zcdll
        5
    zcdll  
       2019-08-28 07:45:01 +08:00 via iPhone
    2 中的后者,{b && <B />}
    ChefIsAwesome
        6
    ChefIsAwesome  
       2019-08-28 08:03:22 +08:00 via Android
    跟问人怎么写判断有什么区别?你写 switch,写个 map 查表,套层函数 /组件,不都行么。jsx 妙就妙在它还是 js。
    forzalianjunting
        7
    forzalianjunting  
       2019-08-28 09:19:30 +08:00
    2 后
    Augi
        8
    Augi  
       2019-08-28 09:42:18 +08:00 via iPhone   ❤️ 1
    @Cbdy 应该是{ !!b && <B>}
    b 不是 bool 类型如果是数字 0 会打印出来
    Cbdy
        9
    Cbdy  
       2019-08-28 09:53:18 +08:00
    @Augi 你再仔细想一下
    love
        10
    love  
       2019-08-28 10:08:44 +08:00
    @Cbdy 是 0 的话是会打出数字啊
    answeryou
        11
    answeryou  
       2019-08-28 10:49:21 +08:00
    @Cbdy 你应该再想一下
    myljs
        12
    myljs  
    OP
       2019-08-28 11:30:48 +08:00
    @Cbdy 是 0 的话,是会直接打出数字 !!b 更好,但实际上三元运算符 return null 才是最正统的,因为如果不想渲染任何东西,需要 return null https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering 而 !! 可能会返回组件本身 or false,当然 React 也处理了 false 的情况,用起来是没问题的。
    Augi
        13
    Augi  
       2019-08-28 18:06:12 +08:00 via iPhone
    @Cbdy 我想过了,你有本事试一下?
    Cbdy
        14
    Cbdy  
       2019-08-28 18:39:51 +08:00 via Android
    @Augi 我错了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2665 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:17 · PVG 23:17 · LAX 08:17 · JFK 11:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.