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>组件。

在代码中添加<linebreak>组件

2 个答案: