基本 React 样式组件，prop 为 false 但应该为 true答案

【问题标题】：Basic React Styled Component, prop is false but should be true基本 React 样式组件，prop 为 false 但应该为 true
【发布时间】：2020-02-13 22:20:10
【问题描述】：

我正在构建我的第一个 React 项目，但我有点卡住了。我无法让 bgColor 正常工作。

方形组件（我正在制作一个网格）

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

const Sqr = styled.div`
    border: 1px solid gray;
    background-color: ${props => props.bgColor || "red"};
    box-sizing: border-box;
`;

// BG COLOR DOESNT WORK



const square = (props) => {
    console.log("[square] props", props)
    return (
        <Sqr>{props.num}</Sqr>
    )
};

export default square;

这是我渲染它的主要组件：

import React from 'react';
import { connect } from 'react-redux';
import styles from './appname.module.css'
import Board from './Board/Board';
import * as actions from '../../store/actions'
import Square from './Square/Square';
import BoardControls from './BoardControls/BoardControls';

class appname extends React.Component {
    constructor(props){
        super(props);
        this.props.initSquares();
    }
    render() {
        return(
            <div className={styles.appname}>
                <BoardControls />
                <Board size={this.props.settings.size}>
                    {this.props.squares.map(sqr => <Square key={sqr} num={sqr} bgColor={this.props.settings.bgColor} />)}
                </Board>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        settings: state.appname.settings,
        squares: state.appname.squares
    }
}

const mapDispatchToProps = dispatch => {
    return {
        initSquares: () => dispatch(actions.initSquares())
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(appname);

浏览器中的背景颜色为红色，如果我将该行更改为读取...

const Sqr = styled.div`
    border: 1px solid gray;
    background-color: ${props => props.bgColor};
    box-sizing: border-box;
`;

...背景颜色属性从浏览器工具的类中消失。

console.log 读取[square] props {num: 0, bgColor: "#ccc"}...所以它被通过了。

请问我做错了什么？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

const square = (props) => {
    console.log("[square] props", props)
    const squareStyle= {
      border: '1px solid gray',
      background-color: props.bgColor,
      box-sizing: 'border-box',
    };
    return (
        <Sqr style={squareStyle}>{props.num}</Sqr>
    )
};

【讨论】：

该代码已损坏（已在下面修复？），我知道我可以这样做，但我特别想使用样式化组件的方式来做到这一点，谢谢 const square = (props) => { console.log("[square] props", props) const squareStyle= { border: '1px solid gray', backgroundColor: props.bgColor, boxSizing: 'border-box', };返回 (
{props.num}
) };导出默认正方形

【解决方案2】：

将 Sqr 放入组件中

const square = (props) => {
    const Sqr = styled.div`
        border: 1px solid gray;
        background-color: ${props => props.bgColor || "red"};
        box-sizing: border-box;
    `;
    return (
        <Sqr>{props.num}</Sqr>
    )
};

【讨论】：

因为我这样做时它无法编译：编译失败。第 6:25 行：'props' 未定义 no-undef
你在组件函数里面注册了Sqr吗？