javascript - 在下拉菜单包装器组件中呈现这些排序按钮？

Question

标签： javascriptreactjs

Answer 1

我能够通过有条件地将元素渲染为

标签，然后将它们注入到配置为容纳它们的下拉列表中（即 li 标签）。

下拉菜单（使用样式化组件）

const Dropdown = styled.label`
    display: inline-block;
    position: relative;
    font-weight: lighter;
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
    float: right;
    padding: 0 20px;
    height: auto;
    margin: 10px 0px 0px;
`

const Menu = styled.div`
    display: inline-block;
    background: #007c92;
    color: #fff;
    border-radius: 2px;
    border: 0;
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 30px 10px 20px;
    cursor: pointer;
    white-space: nowrap;
`
const List = styled.ul`
    position: absolute;
    top: 100%;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    list-style-type: none;
    z-index: 99999;

    li {
        padding: 10px 20px;
        cursor: pointer;
        white-space: nowrap;
      }
`

const Input = styled.input`
    display: none;
    + .dd-menu {
        display: none;
      } 
    :checked + .dd-menu {
    display: block;
    } 

`


class DropdownWrapper extends React.Component {
    constructor(props) {
        super(props)
    }

  render() {
    return (
        <div>
            <Dropdown className="dropdown">
                <Menu className="dd-button">
                    Sort By:
                </Menu>
                <Input type="checkbox" className="dd-input" />
                <List className="dd-menu">
                    {this.props.children} 
                </List>       
            </Dropdown>
      </div>
    )
  }
}

条件排序：

if (!isMobile) {
    return (
      <a
        key={field}
        className={fieldValue ? 'btn-sort name active' : 'btn-sort name'}
        onClick={sortBy}>
        <Capitalized>{field}</Capitalized> {icon}
      </a>
    )
  } else if (isMobile) {
    return (
        <li
        key={field}
        className={fieldValue ? 'btn-sort name active' : 'btn-sort name'}
        onClick={sortBy}>
        <Capitalized>{field}</Capitalized> {icon}
        </li>
    )
  }
}