【问题标题】：React styled-component don't pass propsReact styled-component 不传递道具
【发布时间】：2020-11-20 06:20:31
【问题描述】：

我做了什么：
我将一些道具传递给功能组件 Stat.jsx。

我的预期：
我需要将一些背景渐变颜色代码作为 string 类型属性传递给 Stat.jsx 组件以制作自定义颜色元素。

发生了什么：
道具没有传递给 Stat.jsx，道具对象也是空的。

Stat.jsx

import React from 'react';
import styled from 'styled-components';

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);
    background: linear-gradient(160deg, ${(props) => console.log(props) });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;

// console.log(props) is returning object: { children: "1000", theme: {} }

export default ({ value }) => <Stat>{value}</Stat>;

Stats.jsx

import React from 'react';
import Stat from './Stat';
import styled from 'styled-components';

const Stats = styled.div`
    display: flex;
`;

export default () => (
    <div>
        <Stats>
            <Stat value="1000" background="#F4D03F, #16A085" />
        </Stats>
    </div>
);

【问题讨论】：

标签： javascript reactjs styled-components react-functional-component

【解决方案1】：

样式化的组件道具通常来自 ThemeProvider，这就是为什么您在 console.logging 中看到 theme 道具的原因styled.div

通常在 App.js 中你有这样的东西：

// src/App.jsx

import React from 'react'
import { ThemeProvider } from 'styled-components';

const theme: {
   colors: {
     primary: blue,
   }
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Stat />
  </ThemeProvider>
)

export default App;

您可以通过以下方式访问这些属性 ${(props) => props.theme.colors.primary } 因为 styled-components 为每个 StyledComponents 提供了它的 theme 道具（后面有一个 Context Provider/consumer 的东西）

import React from 'react';
import styled from 'styled-components';

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);
    background: linear-gradient(160deg, ${(props) => props.theme.colors.primary} });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;

【讨论】：

【解决方案2】：

快速修复

因为您没有将背景道具传递给实际的 Stat 组件：

export default (props) => <Stat {...props}>{props.value}</Stat>;

说明

说明问题的更好方法是重命名组件：

import React from 'react';
import styled from 'styled-components';

const StyledStat = 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);
    background: linear-gradient(160deg, ${(props) => console.log(props) });
    font-size: 1.8em;
    font-family: Rubik-Medium;
    color: #fff;
`;


export default function Stat(props){
    const { value } = props;
    
    return (
       <StyledStat {...props}>
          {value}
       </StyledStat>;

};

【讨论】：