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

Question

如何
在 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文档显示了一个带逗号的示例 - 我正在尝试使用 br

标签： reactjsloopsjsx

Answer 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}
>