react 基础开发遇到的 bug

1.使用 styled-components

报错信息

Failed to compile
./src/style.js
Attempted import error: 'injectGlobal' is not exported from 'styled-components'.

报错代码

import { injectGlobal } from 'styled-components';

injectGlobal`
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
`

解决方法

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`

2.使用iconfont图标一直不显示的问题

报错
解决

首先，存放 iconfont 的目录如下

里面的 iconfont.js 就是 iconfont.css 通过改变后缀名的。

改变 iconfont.js

import { createGlobalStyle } from 'styled-components';

export const GlobalIcon = createGlobalStyle`
  @font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1594198489695'); /* IE9 */
  src: url('./iconfont.eot?t=1594198489695#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATsAAsAAAAACXQAAASdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqGDIUbATYCJAMUCwwABCAFhG0HTRssCBFVnNXJfhTGzXQcR1T2WRC6+9E+2jdWe74PJT/Cs2azObU9iG5PftLBi31APMAfy/fzqmcbdVODlsCoXYpoQBO4rekY26gI1SV7vvUs/yP/3flLU8Z5nEYphATh+J/DxS3bYPNblstcA8sCTKiXZXv7onxygSRwYnYKsatd0COBUTkMEMCxZFu4C4pIgKZMGYUA9FxanAvNkFbOISFNRU1ZmGegKRDRjMPERQCYtL+P/sEuiANCSaAcFVMUWABXwjThr8T/z4cMPA347ZkBgFsGMGABkKCXVGsFJDdqIWl/wtkV+IabothWu0zhUuGv+RwIZyRvq//wACELEqiCIuURjE+MRJimMwCBMJObJlsKNSDIfkEG+4sSWcABuMA7APQEClaDlDg/tw8jWXFsoaDMU9S0aKeeJrBsMk0nLro2ekObEbawz5MpKoFhkhZfH7mqQT9rTZNK4bRzW9tKpFv5tCpnvpqWlsKhKM4IQzZBAjb8QvCZYC4SMJyRkLMeZkfCIe4oDQlcacBJigL+sUs0uoYfsN7CovYkpSMsapbdOLu3cpaNTpw1ukGQF+P1f3KKSlu59+BGlZkrV89XXnDkyBXjOasUZ83NXWqz1WPtRYOzASOzBXO4o2cOHDA/or1gBQpsMjorecnz/IdftiXnzDfizWGj2SeRkt0KLJs0eyVwFXEMpTBnsRP1JzV4eEsH55wleWISZ8Q23362HK8i77zB20T0IvREyAtSUrwTB3LeGE73K5q1Izq09dTr35io5b9R33FTe6Gzrc1aA7F4Ny0d5KpIYlI9ZSwpxiRC0cfKMNAmKDQxsPl0P7/OobKhINslQKFXjJ2Z71YrqGvXiix069+db+wd4m1p0eAnoxXKefH6nFKeLVwMvSYnZXh65R54wZUrC/BCDDFmWdh+IfaDTwux8Ym3RheNLgR343VriW6ia906Q0SADVF37NTbP6Zs0Fs3yy3YpcFlQm2+zgJBUqFbj9lWbnL8/ETZ9YVbefeV7vNUuFsXosJfq6acu7iv/AD6l3z4+cs6Jndz+C7lz+Fr7rheUo7VUeyfWb/os9mxEov/dD/6DUk8GxccS9X7775bV7Z2ldKVAWM8q9TulmgxnLG0/0vxQ5xjU16nJVgxzif/4WkP12+YfG35mS3t8bXJJQEA3DFffwvu/3xyVU7qCZEpzXuUmlVg/qDyAkVXsqxXbV3+qxNT3OvAHnlqlHPiHPu1I5+VzidomvkQNSxC0rSMyJhtKDqOoWq6hLYt5fKOCbYUcgubXhQEQ2+I+n4hGfogMuYLxYI/VMOAoe0hyG/YsRpKD/6MStCCfkJtaHCaQQ5O4RH91CkOCmzyFXmsA5BGSTRR4oDcxpTx5jMRB46ph4I6DruOIDA1aCSqREIexy7tSpGhfnZwiyFFIAtoT6BmkIEzG4tD7PNHyJt0FM6p+mG+QmxUtw5SkaQEopQOpaqOpfvoxssI4ehhDiM9UMCMOjVKQEjv10CGiFQ1wkEuJvVcWWnUv7w/xrz3uKYyvYQYUsihhKrxGuphzTsufNWhSA3eqqY2e2xbp16RrmczAAAA') format('woff2'),
  url('./iconfont.woff?t=1594198489695') format('woff'),
  url('./iconfont.ttf?t=1594198489695') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1594198489695#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`

App.js

import React from 'react';
import { Provider } from 'react-redux';
import { GlobalIcon } from './statics/iconfont/iconfont.js';
import store from './store/index.js';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      <div>
        <GlobalIcon />
        <Header />
        <BrowserRouter>
          <div>
            <Route path='/' exact component={Home}></Route>
          </div>
        </BrowserRouter>
      </div>
    </Provider>
  );
}

export default App;

之后便可以在你的所需要的地方使用 iconfont 图标了

<i className="iconfont">&#xe851;</i>

3.使用 Link 组件

报错信息

Error: Invariant failed: You should not use <Link> outside a <Router>

解决方法

import { BrowserRouter as Router, Link } from 'react-router-dom';

render() {
    const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props;
    return (
      <Router>
        <HeaderWrapper>
          <Link to='/'>
            <Logo />
          </Link>
          <Nav>
            <NavItem className='left active'>首页</NavItem>
            <NavItem className='left'>下载App</NavItem>
            <NavItem className='right'>
              <i className="iconfont">&#xe65a;</i>
            </NavItem>
          </Nav>
        </HeaderWrapper>
      </Router>
    )
  }

4.使用 innerRef 获取 input 输入框里面的value

报错

TypeError: Cannot read property 'value' of undefined

解决方法

<Input placeholder='账号' innerRef={(input) => {this.account = input}} />
// 换成
<Input placeholder='账号' ref={(input) => {this.account = input}} />

以后开发中遇到 bug 会持续更新的。😃😃😃😃😃😃