javascript - React 中动态生成的按钮不会重新渲染

Question

我有两个按钮，一个 tweet 按钮和一个 facebook like 按钮。我希望在每个页面上显示这些内容。

第一次加载时，按钮加载得很好。但是，当我转到下一页时，按钮不再加载。此外，如果我返回，按钮将不再存在。

我已经追踪到这个事实 react-router 在新页面加载时不会重新渲染 DOM。由于这些按钮是用一些 JavaScript 生成的，因此不会再次触发。 JavaScript 将临时 div 替换为代表按钮的(有时很大)元素。

目前，我将 JavaScript 打包到 componentDidMount 中，以便每个按钮组件都能正确触发。如上所述，直到第二页为止，这都可以正常工作。此外，我尝试再次将代码放入 componentWillReceiveProps 中，但它没有改变任何内容。

如何让此代码再次运行，以便我可以在每个页面上显示我的社交按钮？

编辑:

这是我正在使用的示例组件:

class TwitterButton extends Component {
  componentWillMount() {
    this.twitterMessage = encodeURIComponent("test tweet");
  }

  componentDidMount(){
    // Code from twitter's website for loading the button in
  }

  render() {
    const twitterUrl = `https://twitter.com/intent/tweet?${this.twitterMessage}`;

    return <a className="twitter-share-button" href={twitterUrl} />;

  }
}

componentDidMount 中的代码在第一页中可以正常触发，但在第二页中却不能。

Answer 1

这看起来是一个众所周知的问题，如 react-router docs 中所述。 :

You may run into issues with components not updating after a location change despite not calling shouldComponentUpdate yourself. This is most likely because shouldComponentUpdate is being called by third-party code, such as react-redux's connect and mobx-react's observer.

With third-party code, you likely cannot even control the implementation of shouldComponentUpdate. Instead, you will have to structure your code to make location changes obvious to those methods.

发生这种情况是因为如果其 props 没有改变，react-redux 将不会重新渲染连接的组件。并且您的 componentWillReceiveProps 根本不会被调用。你需要做的是:

1. 将当前位置传递给连接的组件，该组件应在位置更改时重新渲染。
2. 将 window.twttr.widgets.load() 添加到 componentDidMount 和 componentDidUpdate 中，以便 Twitter 按钮初始值设定项同时完成其工作初始安装后和每次重新渲染后。