React 中动态生成的按钮不会重新渲染答案

【问题标题】：Dynamically generated buttons in React do not re-renderReact 中动态生成的按钮不会重新渲染
【发布时间】：2017-04-27 05:29:37
【问题描述】：

我有两个按钮，一个推特按钮和一个类似 Facebook 的按钮。我希望在每一页上显示这些。

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

我发现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 中的代码在第一页中触发得很好，但在第二页中却没有。

【问题讨论】：

1) 请出示代码。 2）你没有使用任何像redux这样的模式，对吧？
@Nitesh 我真的无法在此处链接我的整个应用程序以证明它不会重新加载。我将放置一个组件的小模板来演示它。是的，我正在使用 react-redux 和 react-router。
我不确定您是如何呈现第一页和第二页的。但是第一次渲染任何组件时，只调用一次“componentDidMount”。
@Nitesh 他们正在通过使用react-router 的ConnectedRouter 组件呈现。
1) 你试过 react-async-script-loader 来注入 twitter 脚本吗？这可能是来自 twitter 的 js 初始化的问题 2) 将代码放入 componentDidMount 和 componentWillMount 中的 this.twitterMessage 只会在安装后触发，问题是您的组件不会再次安装在您的第二页上。您应该改为通过 props 传递消息。

标签： javascript reactjs redux react-router react-redux

【解决方案1】：

这似乎是一个众所周知的问题，在 react-router docs 中进行了描述：

您可能会遇到组件在位置更改后未更新的问题，尽管您自己没有调用 shouldComponentUpdate。这很可能是因为 shouldComponentUpdate 正在被第三方代码调用，例如 react-redux 的 connect 和 mobx-react 的观察者。

使用第三方代码，您甚至可能无法控制 shouldComponentUpdate 的实现。相反，您必须构建代码以使位置更改对这些方法显而易见。

这是因为react-redux 不会在其 props 未更改的情况下重新渲染连接的组件。你的componentWillReceiveProps 根本不会被调用。你要做的是：

将当前位置传递给连接的组件，应在位置更改时重新渲染。
将您的 window.twttr.widgets.load() 添加到 componentDidMount 和 componentDidUpdate，以便 twitter 按钮初始化程序在初始安装后和每次重新渲染后都能正常工作。

【讨论】：

感谢您的回复。你能给我举一个（1）的简短例子吗？