反应-道具更改后组件未更新

Question

我有一个非常简单的react组件来显示FontAwesome图标。看起来像这样：

import React from 'react';

export default class FasIcon extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log("rendering FasIcon ");
    const spanClass = ["icon is-", this.props.size, " is-", this.props.side].join("");

    let component = "";

    if (this.props.icon) {
      component = (
        <span className={spanClass}>
          <i className={["fas fa-", this.props.icon].join("")} />
        </span>
      );     
    }

    return component;
  }
} 

我在进行电子邮件验证的电子邮件字段上使用此代码：

• 最初，道具icon为空。这可行。
• 当开始检查是否使用了地址（异步服务器调用）时，我将图标更新为值spinner，并且图标正确显示。
• 支票完成后，我计划将其更改为times或check。这已正确反映在React Dev Tools的props中，但未反映在实际站点中。

更新

问题是我正在导入svg库，该库将icon元素替换为svg。放置SVG后，react无法替换DOM中的图标。

我已经使用fortawesome预发行插件进行了反应，现在可以使用了。

始终正确调用render方法。

Answer 1

要解决此问题，您必须像这样向i标签添加关键道具：

  <i key={this.props.icon} className={["fas fa-", this.props.icon].join("")} />