同一頁面中的流量多個組件相互影響，錯誤

我在同一頁面中多次使用相同的組件，並且我意識到任何分派的事件都被所有相同的比較器攔截，並且所有組件都一起更新。這是不可接受的，因爲即使它是相同的組件，如果它用於顯示不同的數據，它們應該有完全獨立的行爲。在一個組件中執行的操作絕不應該被另一個組件監聽。我該如何解決這個錯誤？同一頁面中的流量多個組件相互影響，錯誤

來源

2016-05-10 user3006967

如果你能更清楚地解釋你的設置和流程，這可能會有所幫助：在典型的反應通量設置中，' s'不攔截分派的事件（只有商店）。 'Stores'監聽分派的事件，併發出變化。 ' s'聽更改發射，可能從'Stores'獲取數據，並重新渲染。 ' s'不要聽其他' s'（只限於商店和用戶交互）。 – wintvelt

你應該有一個容器組件，它將得到一個數據集合，它代表你正在重複的組件。一個動作會改變數據收集，而不是重複的組件本身。換句話說，重複的組件不應直接從商店獲取數據。

你可以看到一個充滿todomvc例如，具有相同的「的TodoItem」分量是一個頁面在這裏呈現了幾聲：TodoMVC example

例子：

var ButtonStore = require('../stores/ButtonStore'); 

function getButtonState() { 
    return { 
    allButtons: ButtonStore.getAll()  
    } 
} 

const Button = (props) => { 
    return <button>{props.text}</button> 
} 

class ButtonList extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = getButtonState() 
    } 

    render() { 
    return <div> 
      {this.state.allButtons.map(button => <Button {...button} />)} 
      </div> 
    } 
}

這裏的提琴例如，只是沒有商店：Component List Example

這可能是有幫助的，如果你發佈一些代碼示例。

來源

2016-05-10 08:27:01 omerts

同一頁面中的流量多個組件相互影響，錯誤

回答

相關問題