有条件地渲染具有样式化组件的组件

Question

使用样式化的组件，我可以传入值，然后基于这些值获取条件CSS。例如，我可以做，

const ContainerStyled = styled.div<{isOpen: boolean}>`
  ${({ isOpen }) => isOpen
    ? background-color: red
    : ''
  }
`

但是，我想知道是否可以根据该值有条件地渲染其他组件？例如，

const ContainerStyled = styled(isOpen ? ArrowUpIcon : ArrowDownIcon)`
  ${({ isOpen }) => isOpen
    ? background-color: red
    : ''
  }
`

Answer 1

我猜你是在问能否根据条件更改样式目标。

为此，您需要执行简单的步骤：

1. 自定义component has to pass the className prop。
2. 在条件中使用as API。

在下一个示例中，按钮在呈现styled.div和styled(Component)之间切换。

const Container = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${({ isOpen }) => (isOpen ? `red` : `blue`)};
`;

const Component = ({ className }) => <div className={className}>Hello</div>;

const App = () => {
  const [isOpen, toggle] = useReducer(p => !p, false);
  return (
    <>
      <Container as={isOpen ? Component : 'div'} isOpen={isOpen} />
      <button onClick={toggle}>Toggle</button>
    </>
  );
};

Answer 2

您可以根据通过的as道具，使用attrs polymorphic prop附加isOpen chainable method：

const ContainerStyled = styled(ArrowDownIcon).attrs(({ isOpen }) => ({
  as: isOpen ? ArrowUpIcon : undefined
}))`
  background-color: ${({ isOpen }) => isOpen ? 'red' : ''};
`;