google 按钮未呈现 - react.js

Question

我正在学习一个教程并得到了这个代码：

import React from 'react'
import io from 'socket.io-client'
import OAuth from './OAuth'
import { API_URL } from './config'
import '../css/login.css'
const socket = io(API_URL);
const providers = ['twitter', 'google', 'facebook', 'github'];


export default class Login extends React.Component {

    render() {
        return (
            <div className={'wrapper'}>
                <div className={'container'}>
                    {providers.map(provider =>
                        <OAuth provider={provider} key={provider} socket={socket}/>
                    )}
                </div>
            </div>
        )
    }
}

现在当我在浏览器上打开它时，我只看到四个圆圈，here

这是我的 OAuth.js:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import FontAwesome from 'react-fontawesome'
import { API_URL } from './config'

export default class OAuth extends Component {

  state = {
    user: {},
    disabled: ''
  }  

  componentDidMount() {
    const { socket, provider } = this.props

    socket.on(provider, user => {  
      this.popup.close()
      this.setState({user})
    })
  }

  checkPopup() {
    const check = setInterval(() => {
      const { popup } = this
      if (!popup || popup.closed || popup.closed === undefined) {
        clearInterval(check)
        this.setState({ disabled: ''})
      }
    }, 1000)
  }

  openPopup() {
    const { provider, socket } = this.props
    const width = 600, height = 600
    const left = (window.innerWidth / 2) - (width / 2)
    const top = (window.innerHeight / 2) - (height / 2)
    const url = `${API_URL}/${provider}?socketId=${socket.id}`

    return window.open(url, '',       
      `toolbar=no, location=no, directories=no, status=no, menubar=no, 
      scrollbars=no, resizable=no, copyhistory=no, width=${width}, 
      height=${height}, top=${top}, left=${left}`
    )
  }

  startAuth = () => {
    if (!this.state.disabled) {
      this.popup = this.openPopup()  
      this.checkPopup()
      this.setState({disabled: 'disabled'})
    }
  }

  closeCard = () => {
    this.setState({user: {}})
  }

  render() {
    const { name, photo} = this.state.user
    const { provider } = this.props
    const { disabled } = this.state
    const atSymbol = provider === 'twitter' ? '@' : ''

    return (
      <div>
        {name
          ? <div className='card'> 
              <img src={photo} alt={name} />
              <FontAwesome
                name='times-circle'
                className='close'
                onClick={this.closeCard}
              />
              <h4>{`${atSymbol}${name}`}</h4>
            </div>
          : <div className='button-wrapper fadein-fast'>
              <button 
                onClick={this.startAuth} 
                className={`${provider} ${disabled} button`}
              >
                <FontAwesome
                  name={provider}
                />
              </button>
            </div>
        }
      </div>
    )
  }
}

OAuth.propTypes = {
  provider: PropTypes.string.isRequired,
  socket: PropTypes.object.isRequired
}

我现在有两个项目，一个是从github下载的，一个有图标，一个没有，这里是snap。请看正在渲染的有 ::before，没有 ::before 没有

CodeSandBoxIO

Answer 1

如 documentation 中所述，此库不包含任何用于 Font Awesome 的 CSS，希望您自己将其添加到项目中。

如果您更喜欢 CDN，可以从 here

添加它

Updated Sandbox（注意外部资源有一个font-awesomeCSS文件）

您可以通过以下方式将其添加到 index.html：

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>

最初发布者 - 银翼男孩

google 按钮未呈现 - react.js

google button not rendering - react.js

css

font-awesome

reactjs