React/Styled-Components：需要手动滚动一个包含多个版本的下拉列表，开发人员可以通过传入一个类型来使用

Question

A 有一个我使用样式化组件创建的下拉菜单。我现在需要将它重构为一个 React 组件，该组件根据 props 填充它的选项，还提供可以在整个应用程序中使用的不同样式，只需包含下拉列表并将其作为 <button type="small">, <button type="large"> 等道具传递给它即可。有没有人对如何执行此操作有任何建议，或者我可以查看任何资源以获取更多信息？我在下面的示例中包含了另一个项目的按钮元素

Button Example

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Button as AntButton } from 'antd'

const Button = ({ children, type = 'default', ...props }) => {
  const StyledButton = buttonTypes[type] || AntButton

  return (
    <StyledButton
      type={type}
      {...props}
    >
      {children}
    </StyledButton>
  )
}

const buttonTypes = {
  success: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.success}
  `,
  warning: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.warning}
  `,
  danger: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.danger}
  `,
  link: styled(AntButton)`
    && {
      background-color: transparent;
      border: none;
      color: ${({ theme }) => theme.colors.primary};
      display: inline;
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-shadow: none;

      :after,
      :hover,
      :focus {
        border: none;
        text-decoration: none;
      }
    }
  `
}

Button.propTypes = {
  type: PropTypes.oneOf([
    'default',
    'primary',
    'secondary',
    ...Object.keys(buttonTypes)
  ]),
  children: PropTypes.node
}

Button.defaultProps = {
  children: null
}

export default Button

Dropdown (in progress)

import styled from 'styled-components'

const Dropdown = styled.select`
  padding: 5px 45px 5px 10px;
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 500;
  color: black;
  border: 2px solid black;
  height: 36px;
  background-color: ${({ theme }) => theme.colors.white};
  border-radius: 0;
  appearance: none;
  background-image: url(${icon});
  background-repeat: no-repeat;
  background-position: right 8px center;
`
export default Dropdown

Answer 1

一般来说，最好有一个 StyledComponent 来适应给定的道具。以 styled-components documentation 为例：

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

不太清楚您要采用哪种样式，这是一个基于您问题中的下拉列表的简单示例。

import styled, { css } from 'styled-components'

const Dropdown = styled.select`
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    border-radius: 0;
    appearance: none;
    background-image: url(${icon});
    background-repeat: no-repeat;
    background-position: right 8px center;

    ${({ theme, type }) => {
        switch(type) {
            case 'light': 
                return css`
                    background-color: ${theme.colors.white};
                    color: ${theme.colors.darkGrey};
                `;
            case 'dark':
                return css`
                    background-color: ${theme.colors.darkGrey};
                    color: ${theme.colors.white};
                `
            case default:
                return css`
                    background-color: transparent;
                    color: ${theme.colors.darkGrey};
                `
        }

    }}
`;

export default Dropdown;

React/Styled-Components：需要手动滚动一个包含多个版本的下拉列表，开发人员可以通过传入一个类型来使用

React/Styled-Components: Need to hand roll a dropdown with multiple versions that a developer could use by passing a type in

javascript

reactjs

dropdown

styled-components