Звезды React нельзя комбинировать с иконками FontAwesome в Firefox и IE - PullRequest
Новая
       11

Звезды React нельзя комбинировать с иконками FontAwesome в Firefox и IE

0 голосов
/ 12 апреля 2019

Я пытаюсь использовать https://www.npmjs.com/package/react-stars в сочетании с иконкой из FontAwesome.Это хорошо работает в Chrome и Safari, но значок отображается поверх span, содержащего звезду в Firefox, что приводит к тому, что звезда не активируется.Есть небольшая область выше и ниже звезды, которую можно щелкнуть в Firefox.

Что я могу сделать, чтобы это исправить? 

import React, {Component} from 'react';
import ReactStars from 'react-stars'
import '../node_modules/font-awesome/css/font-awesome.min.css';

class App extends Component {

    render() {
        return (
            <div className="App">
                <ReactStars
                    size={50}
                    half={false}
                    onChange={(newRating) => {
                        console.log(newRating)
                    }}
                    char={<i className="fa fa-star" aria-hidden="true"></i>}
                />
            </div>
        );
    }
}

export default App;

1 Ответ

1 голос
/ 12 апреля 2019

На основании их документации https://www.npmjs.com/package/react-stars#api они ожидают, что char будет строкой.Так что я полагаю, что проблема в том, что он не работает должным образом при использовании элементов.

Я искал и нашел эту библиотеку react-rating, которая кажется довольно крутой и простой в использовании.https://www.npmjs.com/package/react-rating

Вы можете найти их примеры здесь: http://dreyescat.github.io/react-rating/

Вы можете добавить font-awesome иконки так же просто, как: 

<Rating
  emptySymbol="fa fa-star-o"
  fullSymbol="fa fa-star"
  fractions={2}
/>
...