我学习了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>< 320px</p>
</StyledUnavailableView>
</Default>
</div>
);
}
}
const mapStateToProps = state => {
return { articles: state.rootReducer.remoteArticles };
};
const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;
答案 0 :(得分:1)
您必须替换样式化组件中的扩展调用。您应该使用语法show here来创建扩展组件。
代替
const StyledMobile = AppContainer.extend`
background: #febfc1;
`;
应该是:
const StyledMobile = styled(AppContainer)`
background: #febfc1;
`;