在React中，在n个数组中的x个项目上渲染父元素？

Question

我有一个简单的map函数。

<div>
    {
        items.map((item, index)=>(
            <p key={index}>{item}</p>
        ))
    }
</div>

渲染这个HTML。

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

我怎样才能在前两个元素上插入一个跨度，使我有？

<div>
    <span>
        <p>1</p>
        <p>2</p>
    </span>
    <p>3</p>
</div>

我已经试过了。

<div>
    {
        items.map((item, index)=>(
            <>
                { index === 0 && <span> }
                <p key={index}>{item}</p>
                { index === items.length - 1 && </span> }
            </>
        ))
    }
</div>

但我得到一个错误：

Parsing error: Unexpected token: 意料之外的标记

Answer 1

这个错误是由于这个表达式造成的。

// You must render children if you don't close JSX tag <span></span>
{ index === 0 && <span> }

// Same here, <span/>
{ index === items.length - 1 && </span> }

请看 JSX的深度

另外，你想把两个项目归到一个跨度下，用一个地图迭代来做可能会使事情变得过于复杂。

const items = [1, 2, 3];
const mapToParagraph = (item, index) => <p key={index}>{item}</p>;

const App = () => {
  // or slice for more generics
  const [first, second, ...rest] = items;
  return (
    <div>
      <span style={{ color: `red` }}>
        {[first, second].map(mapToParagraph)}
      </span>
      {rest.map(mapToParagraph)}
    </div>
  );
};

Answer 2

试试这个，在跨度的最后加上斜杠。

                   <div>
                      {[1, 2, 3, 4, 5, 6].map((item, index) => (
                        <>
                          {index === 0 && <span />}
                          <p key={index}>{item}</p>
                          {index === [1, 2, 3, 4, 5, 6].length - 1 && <span />}
                        </>
                      ))}
                    </div>

Answer 3

编辑

<div>
    { 
        items.slice(0, 2).length > 0 && (
            <span>
                { items.slice(0, 2).map((it, i) => (
                    <p key={i}>{it}</p>
                ))}
            </span>
        )
    }
    {
        items.slice(2).map((it, i) => (
            p>{it}</p>
        ))
    }
</div>