时间戳

首页 > 解决方案 > React-Stars 不能与 Firefox 和 IE 中的 FontAwesome 图标结合使用

reactjs - React-Stars 不能与 Firefox 和 IE 中的 FontAwesome 图标结合使用

问题描述

我尝试将https://www.npmjs.com/package/react-stars与 FontAwesome 的图标结合使用。这在 Chrome 和 Safari 中运行良好，但在 Firefox 中，图标会呈现在span包含星号的上方，导致星号不可点击。在 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;

标签： reactjsfirefoxfont-awesome

解决方案

根据他们的文档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}
/>

推荐阅读