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

问题描述：

我有两个按钮，一个推文按钮和一个facebook like按钮。在每个页面上，我都希望这些显示。React中动态生成的按钮不会重新渲染

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

我跟踪了这个事实，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）你没有使用任何像REDX模式，对吧？ – Nitesh

@Nitesh我真的不能链接我的整个应用程序来演示它不会重新加载。我将搭建一个组件的小模板来演示它。是的，我正在使用'react-redux'和'react-router'。 – rec

我不确定你是如何渲染你的第一页和第二页。但'componentDidMount'在第一次渲染任何组件时只会被调用一次。 – Nitesh

答

这看起来像一个众所周知的问题，react-router docs描述：

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

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

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

将当前位置传递给连接的组件，这应该在位置变化时重新渲染。
将您的window.twttr.widgets.load()添加到componentDidMount和componentDidUpdate，这样Twitter初始化器在初始安装后以及每次重新渲染后都可以工作。

谢谢你的回复。你能给我一个（1）的简单例子吗？ – rec

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

相关推荐