在块代码中添加 <换行符 /> 组件

Question

我有一个呈现附件名称的小组件。我想在每个附件名称之间添加一个线路，我有一个<LineBreak />组件，但我不确定在此处添加组件的正确语法是什么。

我尝试了：

return file.name + <LineBreak />

和：

return file.name + (<LineBreak />)

，但他们俩都没有起作用。

export default function AttachedFile({ attachments }) {
  return (
    <div>
      <NavLink to="./" css={text}>
        {Array.from(attachments).map(file => {
          return file.name; // How do I add the <LineBreak /> component here?;
        })}
      </NavLink>
    </div>
  );
}

Answer 1

可能最简单的解决方案是使用片段：

   <NavLink to="./" css={text}>
    {Array.from(attachments).map((file, index) => (
      <React.Fragment key={index}>
        {file.name}<LineBreak />
      </React.Fragment>
    ))}
  </NavLink>

请注意，无论如何您都应该在迭代中具有key。

Answer 2

export default function AttachedFile({ attachments }) {
  return (
    <div>
      <NavLink to="./" css={text}>
        {Array.from(attachments).map(({ name }, index) => (
          <React.Fragment key={index}>
            {name}
            <LineBreak />
          </React.Fragment>
        ))}
      </NavLink>
    </div>
  );
}

这里的.map正在返回一个包含两个元素的React.Fragment，第一个是文件的名称，其次是<LineBreak>组件。