Question

我有两个按钮，一个推文按钮和一个像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中的代码在第一页中触发正常，但第二页却没有。

Answer 1

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

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

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

这是因为react-redux如果其道具没有改变，则不会重新渲染连接的组件。并且根本不会调用componentWillReceiveProps。你要做的是：

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

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

1 个答案: