React 样式组件不传递道具

Question

我做了什么：
我正在将一些道具传递给功能组件 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>
);

Answer 1

快速修复

因为您没有将背景道具传递给实际的 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>;

};

Answer 2

样式组件道具通常来自 ThemeProvider，这就是为什么您在 styled.div

中看到 theme 道具而 console.logging

通常在 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;
`;

React 样式组件不传递道具

React styled-component don't pass props

javascript

reactjs

styled-components

react-functional-component

快速修复

说明