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

标签： javascriptreactjsjsx

Answer 1

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

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

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