JSX 中的多个 if/else

Question

我正在尝试在 jsx 中增加 map() 中的变量并隐藏基于它的元素。我收到以下错误

编译失败。
解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 ...？

我认为这是困扰我的行

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

有什么想法吗？ （我不是一个全职的 React 开发者，所以有点迷失在 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>
))}

Answer 1

第一个问题：地图周围缺少碎片

基本上你不能有一个看起来像的 jsx

<foo/>
<bar/>

因为 React 不知道根元素，它需要做 React 魔术，将 JSX 转换为响应式 HTML，所以你需要有

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

_{<> 是<React.Fragment> 的简写}

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

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

will produce

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

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

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

第二个问题：无效的 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>}

我知道它在编写时有意义，但它不会编译，因为 React 会尝试分别评估 myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className=""> 和 myIncrement % 2 == 0 && </div> 并且这是不可能的（还没有？）。

你可以得到类似的东西如下：

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

Answer 2

你不能做什么：

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

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

它被拒绝了，因为你试图渲染一个<div> 开始标记，而不是在其他语句中的</div> 标记。 它们必须像这样属于一起：

  <React.Fragment>
    {myIncrement % 2 == 0 ? (
      <div data-key-id={row.key} key={row.key} className="">
        <div className=""> // <= could be a new component 
          <div className="">{row.key}:</div>
          <div className="">{row.value}</div>
        </div>
      </div>
    )
    : (
      <div className=""> // <= could be a new component
        <div className="">{row.key}:</div>
        <div className="">{row.value}</div>
      </div>
    )
  }

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