为什么在这种特定情况下我会得到"TypeError: AppContainer.extend“

Question

我学习了Reactjs和Javascript，现在我不明白为什么这个错误会发生，即使它在这个Codesandbox中工作，但不能在我的笔记本电脑VSCode中工作

代码是相同的，除了我使用React.Component和Codesandbox使用function，但我仍然得到这个错误，请建议！

​

​

我在VSCode中的代码：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, Container, Col } from 'react-bootstrap';
import Responsive from 'react-responsive';
import styled from 'styled-components';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';
import '../../styles/navbar.scss';

const Desktop = props => <Responsive {...props} minWidth={1280} />;
const Tablet = props => <Responsive {...props} minWidth={768} maxWidth={1279} />;
const Mobile = props => <Responsive {...props} minWidth={320} maxWidth={767} />;
const Default = props => <Responsive {...props} maxWidth={319} />;

const AppContainer = styled.div`
    border-radius: 5px;
    padding: 10px;
`;

const StyledDesktop = AppContainer.extend`
    background: #fc635d;
`;

const StyledTablet = AppContainer.extend`
    background: #fd9191;
`;

const StyledMobile = AppContainer.extend`
    background: #febfc1;
`;

const StyledUnavailableView = AppContainer.extend`
    background: #ececec;
    color: white;
`;
class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        const { toggle } = this.props;
        const { visible } = this.props;

        return (
            <div className="App">
                <Desktop>
                    <StyledDesktop>
                        <h1>BreakPoint 3 - LARGE</h1>
                        <h2>DESKTOP</h2>
                        <p>1280px + </p>
                    </StyledDesktop>
                </Desktop>

                <Tablet>
                    <StyledTablet>
                        <h1>BreakPoint 2 - MEDIUM</h1>
                        <h2>TABLET</h2>
                        <p>768 - 1279px</p>
                    </StyledTablet>
                </Tablet>

                <Mobile>
                    <StyledMobile>
                        <h1>Breakpoint 1 - SMALL</h1>
                        <h2>MOBILE</h2>
                        <p>320 - 768px</p>
                    </StyledMobile>
                </Mobile>

                <Default>
                    <StyledUnavailableView>
                        <h1>Unavailable View</h1>
                        <p>&lt; 320px</p>
                    </StyledUnavailableView>
                </Default>
            </div>

        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;

Answer 1

您必须替换样式组件中的extend调用。您应该使用语法show here来创建扩展组件。

而不是

const StyledMobile = AppContainer.extend`
    background: #febfc1;
`;

应该是：

const StyledMobile = styled(AppContainer)`
    background: #febfc1;
`;