如何在组件中使用三元运算符向Styled Component传递Props？

嘿，我之前也踩过这个坑！咱们先唠唠为啥会报错：

你用className的写法没问题，是因为className本身就接受字符串/null这类值，直接用三元表达式赋值完全符合JSX的属性语法。但你尝试直接塞一个对象当属性时，JSX就懵了——它不知道该怎么处理这种“裸对象”的写法，所以才抛出了Unexpected token的错误。

下面给你两种靠谱的解决办法：

方案1：用扩展运算符展开条件对象 #

JSX里要传递动态对象属性，得用扩展运算符...来告诉它“把这个对象里的键值对拆成单独的属性”。注意别返回null，改成返回空对象（展开空对象等于啥也不传）：

<Item {...(isHere ? { joined: true } : {})}>
  // Stuff
</Item>

方案2：直接传递布尔属性（更简洁） #

其实Styled Components对布尔属性的支持特别友好，你完全可以直接把isHere赋值给joined属性，不用绕弯子写对象：

<Item joined={isHere}>
  // Stuff
</Item>

对应的Styled Component可以这么定义，根据props.joined切换样式：

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

const Item = styled.div`
  /* 基础样式 */
  padding: 8px;
  border: 1px solid #eee;

  ${props => props.joined && css`
    border-color: blue;
    background-color: #f0f8ff;
  `}
`;

简单总结下：JSX的属性要么是key={value}的形式，要么是用...展开一个对象。你之前的写法既不是键值对，又没加扩展运算符，JSX解析器自然会报错啦～

内容的提问来源于stack exchange，提问作者Evanss