reactjs - React-Select 值中的缩进条目

Question

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

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

谢谢。

标签： reactjsreact-select

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