кнопка гугл не рендерит - реагировать.js - PullRequest
Новая
       6

кнопка гугл не рендерит - реагировать.js

0 голосов
/ 02 ноября 2019

CodeSandBoxIO

Я проходил урок и получил этот код: 

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>
        )
    }
}

Теперь, когда я открываю это в браузере, я получаю только четыре круга, здесь

Вот мой 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, один показывает значок, другой нет, вот оснастка . Пожалуйста, посмотрите, что есть ::before в том, который рендерит, и нет ::before, который не является.

CodeSandBoxIO

1 Ответ

0 голосов
/ 05 ноября 2019

Как упомянуто в документации , эта библиотека не содержит CSS для Font Awesome и ожидает, что вы добавите ее в проект самостоятельно.

Если вы предпочитаете CDN, вы можете добавить его из здесь

Обновленная песочница (Обратите внимание, что во внешних ресурсах есть font-awesome файл CSS))

Вы можете добавить его в index.html с помощью: 

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

Первоначально опубликовано - Мальчик с серебряными крыльями

...