如何有条件地为 OPENING 和 CLOSING 标签呈现 DIV 和 REACT 组件？

Question

我有一段代码应该根据应用的条件呈现。 例如：

isMobile ? <MyComponent> : <div className={styles.myclassStyle}>

....other code goes here....

isMobile ? </MyComponent> : </div>

如果isMobile为真，则应选择MyComponent否则 html 元素
分区。 有可能这样做吗？ 任何替代解决方案？

Answer 1

您将有条件地呈现整个代码位，并且您必须将它与单个根元素一起在括号中返回。 所以例如

{
  isMobile ? (
    <MyComponent>
      // this code runs if isMobile === true
      // ... code for MyComponent
    </MyComponent>
  ) : (
    <div className={styles.myclassStyle}>
      // this code runs of isMobile === false
      // ... code for the div goes here
    </div>
  )
}