React-Select 值中的缩进条目

【问题标题】：Indent Entry in React-Select ValuesReact-Select 值中的缩进条目
【发布时间】：2024-04-24 23:50:02
【问题描述】：

我不熟悉使用react-select。我要做的是有条件地设置选择下拉框中某些下拉项的缩进间距。看起来像这样的东西：

即，这就是我希望项目在下拉菜单框中的外观。即，如果它是一个孩子，它会从其父级缩进，而孙子级将从其父级缩进。这在react-select 中可行吗？如果是这样，我该怎么做？

谢谢。

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

我也遇到了同样的问题。可悲的是，MarginLeft 不起作用。因此我从这里使用了动态间距方法：How to return a character n times before an element react

最后的代码看起来像

const recursivelyListElements = (elist, level) => {
  let returnValues = []
  elist.map(e => {
    const spacing = Array.from(Array(4 * level), () => '\u00A0');
    returnValues.push(
      <option
        value={e.location_id}
        style={{fontSize: (24 - 4 * level) + 'px'}}
        // style={{marginLeft: level + 'em', fontSize: (24 - 4*level)+ 'px'}} marginLeft does not work here
      >
        {spacing}
        {e.title_en}
      </option>
    )
    if (e.children && e.children.length > 0) {
      returnValues.push(...recursivelyListElements(e.children, level + 1))
    }
  })
  return returnValues
}

// ...

<select className="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    {recursivelyListElements(props.locations, 0)}
</select>

【讨论】：