javascript - JSX 中的多个 if/else

Question

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

Failed to compile.
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?

我认为这是困扰我的行

{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

第一个问题: map 周围缺少片段

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

<foo/>
<bar/>

因为 React 无法知道根元素，它需要执行 React 魔法，将 JSX 转换为响应式(Reactive) HTML，而您需要拥有

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

<子> <>是 <React.Fragment> 的简写

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

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

will produce

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

要修复此错误，只需在 map 周围添加一个片段即可:

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