Question

如果我在jsx中使用条件运算符，例如{ var || var2 }，{ var && var2 }，则会出现语法错误。

我想要实现的是

render(){
  return (
    {bool1} || {bool2} && <renderSomething>
  )
}

我不想将其包装在某些<div>

中

使用jsx语法的任何其他技巧都将非常有帮助。

Answer 1

render(){
  return (
    <React.Fragment>
        { bool1 || bool2 && <renderSomething> } 
    </React.Fragment>
  )
}

您可以使用React.Fragment。

Answer 2

如果您不希望div被包装，则使用React.Fragment之类的

下面是在案例中进行条件渲染的三种可能方式

render(){
  return (
     <React.Fragment>
       {bool1 && <renderSomething>}
       {bool2 && <renderSomething>}
     </React.Fragment>
  )
}

render(){
  return (
     <React.Fragment>
       {bool1 || bool2 && <renderSomething>}
     </React.Fragment>
  )
}

render(){
  return (
     <React.Fragment>
       {bool1 ? <renderSomething> :( bool2 ?  <renderSomething>: null)}
     </React.Fragment>
  )
}

在React jsx中可以用花括号{}编写的有效语法是什么

2 个答案: