React styled-components无法传递props问题求助

你的问题根源在于函数组件没有将接收到的background props传递给styled-components定义的Stat组件，导致styled组件无法获取到自定义的背景渐变值。下面是具体的修复步骤：

步骤1：修改Stat.jsx的函数组件，传递所有需要的props #

当前你的函数组件只解构了value，并仅将value作为children传给styled组件，完全忽略了background。你需要把接收到的background也传递下去，或者更灵活地传递所有props：

// 方式1：明确传递指定props
export default ({ value, background }) => <Stat background={background}>{value}</Stat>;

// 方式2：使用扩展运算符传递所有props（推荐，后续新增props无需修改这里）
export default (props) => <Stat {...props}>{props.value}</Stat>;

步骤2：完善styled组件的background样式逻辑 #

现在styled组件已经能拿到background props了，你需要在样式中正确使用它，同时建议添加默认值避免未传props时出错：

const Stat = styled.div`
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 2.5em;
 width: auto;
 height: 2.5em;
 border-radius: 0.5em;
 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
 // 这里修改为获取props.background，同时设置默认渐变值
 background: linear-gradient(160deg, ${props => props.background || '#F4D03F, #16A085'});
 font-size: 1.8em;
 font-family: Rubik-Medium;
 color: #fff;
`;

为什么原来的props里没有background？ #

你在styled组件里console.log(props)只能拿到children和theme，是因为函数组件并没有把background传递给它——styled组件的props只来自于你在JSX中给它传入的属性，而之前你只传入了children（即{value}），所以自然看不到background。

完成以上修改后，Stats.jsx中传入的background="#F4D03F, #16A085"就能正确作用到Stat组件的背景渐变上了。

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