React JSX - 在循环中注入 br 标签

【问题标题】：React JSX - inject br tag in loopReact JSX - 在循环中注入 br 标签
【发布时间】：2020-11-15 15:47:22
【问题描述】：

如何在 jsx 中的选定选项之间添加
标签？

<Select
  labelId="demo-mutiple-checkbox-label"
  id="demo-mutiple-checkbox"
  multiple
  value={preferences}
  onChange={handleChangePreferences}
  input={<Input />}
  renderValue={(selected) => selected.join(<br />)}
  // MenuProps={MenuProps}
  style={{width: "100%",  whiteSpace: "break-spaces"}}
>

我已经尝试过 br 、\n、"\n" - 我找不到可行的方法。

Material UI docs 显示一个带逗号的示例 - 我正在尝试使用 br

【问题讨论】：

标签： reactjs loops jsx

【解决方案1】：

将Select 组件更新为此。例如https://codesandbox.io/s/material-demo-40jg3

<Select
  labelId="demo-mutiple-checkbox-label"
  id="demo-mutiple-checkbox"
  multiple
  value={personName}
  onChange={handleChange}
  input={<Input />}
  renderValue={selected => (
    <>
      {selected.map(value => (
        <>
          {value}
          <br />
        </>
      ))}
    </>
  )}
  MenuProps={MenuProps}
>

【讨论】：

您的建议格式会出现在一个选择框中。我正在尝试在渲染语句中将它们打印出来，并由 br 标签连接。你知道如何实现吗？ ——
@Mel 更新了上面的评论。