Question

我在同一页面中多次使用相同的组件，我只是意识到所有调度的事件都被所有相同的组件拦截，并且所有组件一起更新。这是不可接受的，因为即使它是相同的组件，如果它用于显示不同的数据，它们应该具有完全独立的行为。在一个组件中执行的操作永远不应该被另一个组件监听。我该如何解决这个错误？

Answer 1

你应该有一个容器组件，它将获得一个数据集合，代表你正在重复的组件。操作将更改该数据集合，而不是重复的组件本身。换句话说，重复的组件不应直接从商店获取数据。

你可以看到一个完整的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

如果您发布一些代码示例，它可能会有所帮助。

磁通量同一页面中的多个组件相互影响，错误

1 个答案: