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大火只是在第一頁正常，但是第二頁沒有。

來源

2017-04-27 rec

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初始化器在初始安裝後以及每次重新渲染後都可以工作。

來源

2017-04-27 09:39:40 fkulikov

謝謝你的回覆。你能給我一個（1）的簡單例子嗎？ – rec

React中動態生成的按鈕不會重新渲染

回答

相關問題