Javascript JSX中的多个if/else_Javascript_Reactjs_Jsx

Javascript JSX中的多个if/else

javascript reactjs

Javascript JSX中的多个if/else,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我试图在jsx中的map（）中增加一个变量，并隐藏基于它的元素。我得到以下错误未能编译。分析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗我想这是困扰我的争吵 {myIncrement%2==0&&} 有什么想法吗？（我不是全职开发人员，所以在jsx中有点迷失）下面是该部分的完整代码 {props.config.map(row => ( (row.isRequired || props.data[row.key]) && <

我试图在jsx中的

map（）

中增加一个变量，并隐藏基于它的元素。我得到以下错误

未能编译。
分析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗

我想这是困扰我的争吵

{myIncrement%2==0&&}

有什么想法吗？（我不是全职开发人员，所以在jsx中有点迷失）

下面是该部分的完整代码

{props.config.map(row => (
  (row.isRequired || props.data[row.key]) && 
     <React.Fragment>
        {row.isFullWidth ? 
          <div data-key-id={row.key} key={row.key} className="">
            <div className="">
              <div className="">some key</div>
                <div className="">some value</div>
            </div>
          </div>
         :
          <React.Fragment>
            {myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className="">}
              <div className="">
                <div className="">{row.key}:</div>
                <div className="">{row.value}</div>
              </div>
            {myIncrement % 2 == 0 && </div>}

            {myIncrement = !row.isFullWidth ? myIncrement + 1 : myIncrement}
          </React.Fragment>
         }
      </React.Fragment>
))}

{props.config.map（行=>(
（row.isRequired | | props.data[row.key]）&&
{row.isFullWidth？
一些钥匙
一些价值
:
{myIncrement%2==0&&}
{row.key}：
{row.value}
{myIncrement%2==0&&}
{myIncrement=！row.isFullWidth？myIncrement+1:myIncrement}
}
))}

第一个问题：地图周围缺少碎片基本上你不能有一个jsx看起来像

<foo/>
<bar/>

因为React无法知道根元素，它需要执行React魔术，将JSX转换为反应式HTML，相反，您需要

<>
  <foo/>
  <bar/>
</>

是

这就是关于相邻元素的错误消息的含义。地图将创建相邻元素：

['a', 'b', 'c'].map(letter => <div>{letter}</div>)

will produce

<div>a</div>
<div>b</div>
<div>c</div>

['a'，'b'，'c'].map（字母=>{letter}）
将产生
A.
B
C

要修复此错误，只需在地图周围添加一个片段：

<>
  { props.config.map(row => (
    /* ... */
  )}
</>


{props.config.map（行=>(
/* ... */
)}

第二个问题：JSX语法无效这是无效的JSX:

{ myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className=""> }
  <div className="">
    <div className="">{row.key}:</div>
    <div className="">{row.value}</div>
  </div>
{myIncrement % 2 == 0 && </div>}

{myIncrement%2==0&&}
{row.key}：
{row.value}
{myIncrement%2==0&&}

我知道在编写它时它是有意义的，但它不会编译，因为React将尝试分别计算

myIncrement%2==0&&

和

myIncrement%2==0&&

，这是不可能的（现在还不可能）

您可以获得如下类似信息：

// define this part of the component somewhere
const Foo = ({ key, value}) => (
  <div>
    <div>{key}:</div>
    <div>{value}</div>
  </div>
);

// surround it or not by a div, depending on the increment value
{ myIncrement % 2 == 0 ? (
    <div data-key-id={row.key} key={row.key}>
      <Foo key={row.key} value={row.value}/>
    </div>
  ) : (
    <Foo key={row.key} value={row.value}/>
  )
}

//在某处定义组件的这一部分
常量Foo=（{key，value}）=>(
{key}：
{value}
);
//是否用div将其环绕，取决于增量值
{myIncrement%2==0(
) : (
)
}