React styled-component 不传递道具

Posted 2023-03-16

【中文标题】React styled-component 不传递道具

【英文标题】：React styled-component don't pass props

【发布时间】：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>
);

【参考方案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>;

;