BottomBtn组件的属性icon类型不匹配

Question

在调用组件BottomBtn时，App.js中使用如下代码引入该组件：
import { faPlus, faFileImport } from ‘@fortawesome/free-solid-svg-icons’;

而BottomBtn组件的主要定义如下：

然而在运行时报错：
index.js:1 Warning: Failed prop type: Invalid prop icon of type object supplied to BottomBtn, expected a single ReactElement.
in BottomBtn (at App.js:37)
in App (at src/index.js:7)

我反复的看视频，确认代码，没发现代码哪里写错了，不知道是什么原因造成的，请老师帮忙看以下这个问题，谢谢！

Answer 1

Bug制造专家 2020-05-26 21:24:44

icon是个obj对象，验证改一下就可以了

icon:PropTypes.object,

Answer 2

qq_慕勒5016658 2020-05-24 00:00:02

我也遇到了同样的问题，求个解答

• qq_慕勒5016658 #1

  从【import { faPlus, faFileImport } from ‘@fortawesome/free-solid-svg-icons’;】里引入的是一个object，但是在Bottom.js里面定义的类型是一个single ReactElement。将定义改成object就能解决了。
  这个是FontAwesome的样式改变了吗？

Answer 3

路子很野 2020-03-11 23:17:13

贴一下app.js  里面的  buttonbtn 组件的使用呗

• 提问者 阿阳2017 #1

  在App.js中，是这样使用buttonbtn这个组件的：
  import { faPlus,faFileImport} from '@fortawesome/free-solid-svg-icons';
  <div className="col">
                <BottomBtn
                  text="导入"
                  colorClass="btn-success"
                  icon={faFileImport}
                  onBtnClick={importFiles}
                />
              </div>
  我看就是PropTypes.element的问题。不知道为啥视频中是没有问题的，我的是照着写的，这种类型就是不通过。