Reactjs 如何在不使用父组件的情况下在两个同级组件之间直接通信？_Reactjs_Redux

Reactjs 如何在不使用父组件的情况下在两个同级组件之间直接通信？

reactjs redux

Reactjs 如何在不使用父组件的情况下在两个同级组件之间直接通信？,reactjs,redux,Reactjs,Redux,我有一个父组件C，它是两个子组件a和B。假设我在计算B组件后得到一些数据，我想直接传递给一个组件，而不使用父组件C 我怎样才能做到这一点？有多少种方法可以做到这一点？它在这里帮助redux还是上下文API？是的，您可以在这里使用redux与组件A通信，而不使用父组件。将数据从组件B传递给动作创建者，后者随后将动作分派给减速器。reducer将返回您可以从组件A访问的状态（现在保存数据）。您需要将A和B连接到redux存储假设您希望组件A中的“数据”也可以在组件B中访问 class A ext

我有一个父组件C，它是两个子组件a和B。假设我在计算B组件后得到一些数据，我想直接传递给一个组件，而不使用父组件C

我怎样才能做到这一点？有多少种方法可以做到这一点？

它在这里帮助redux还是上下文API？

是的，您可以在这里使用redux与组件A通信，而不使用父组件。将数据从组件B传递给动作创建者，后者随后将动作分派给减速器。reducer将返回您可以从组件A访问的状态（现在保存数据）。您需要将A和B连接到redux存储

假设您希望组件A中的“数据”也可以在组件B中访问

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

action creator接收数据，将其包装在action中并发送给reducer。reducer返回数据，该数据成为状态的一部分

class B extends React.Component{
  //We can access data as this.props.data here
}
function mapDispatchToProps(state) {
   return {data: state.LoginReducer.data};
}
export default connect(mapDispatchToProps, actionCreators)(B)

然后，我们在mapDispatchToProps中指定所需的状态片段，并将其传递给connect助手。“连接”帮助器将数据作为组件B中的this.props.data提供

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

我希望我解释得足够好。

是的，您可以在这里使用redux与组件A通信，而无需使用父组件。将数据从组件B传递给动作创建者，后者随后将动作分派给减速器。reducer将返回您可以从组件A访问的状态（现在保存数据）。您需要将A和B连接到redux存储

假设您希望组件A中的“数据”也可以在组件B中访问

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

action creator接收数据，将其包装在action中并发送给reducer。reducer返回数据，该数据成为状态的一部分

class B extends React.Component{
  //We can access data as this.props.data here
}
function mapDispatchToProps(state) {
   return {data: state.LoginReducer.data};
}
export default connect(mapDispatchToProps, actionCreators)(B)

然后，我们在mapDispatchToProps中指定所需的状态片段，并将其传递给connect助手。“连接”帮助器将数据作为组件B中的this.props.data提供

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

我希望我解释得足够好。

如果你不想把你的状态提升到父级，那么

redux

或

Context-API

都是一个不错的选择，但是，如果你的项目中没有使用

redux

，那么我建议尝试使用

Context-API

redux附带了很多样板代码，将redux仅用于两个组件是过分的
redux store对您的项目来说是全局的，如果您想使用上下文API在两个同级之间共享数据，您可以使用
```
上下文提供程序包装这些数据
```

如果您不想将您的状态提升到父级，那么redux
或Context-API
都是一个不错的选择，但是，如果您的项目中没有使用redux
，那么我建议尝试使用Context-API


redux附带了很多样板代码，将redux仅用于两个组件是过分的
redux store对您的项目来说是全局的，如果您想使用上下文API在两个同级之间共享数据，您可以使用上下文提供程序包装这些数据

是的，这是使用redux的一个很好的理由，可以在组件之间全局共享数据。如果您给我一个可能重复的是的例子，这将非常有帮助，这是使用redux的一个很好的理由，在组件之间全局共享数据。如果您给我一个示例，这将非常有帮助。这里可能重复您的答案中只有一个问题；通常，我将一个动作分派给一个减速机，它会将新状态返回给同一个组件（假设我有登录表单B组件，并通过mapDispatchToProps和connect函数调用dispatch操作，我总是从reducer返回或回复新状态，并在同一组件中使用状态数据mapStateToProps，但如果我想获得A和B组件的状态，我该如何实现？假设A是我的仪表板组件或其他组件）如何将A&B组件连接到redux存储并同时获取数据？您可以在两个组件中使用MapStateTrops。订阅相同的reducer但如果我有一个仪表板，并且已经存在另一个reducer，在这种情况下，我认为这是不可能的，因为我不知道它（一个组件）可以访问多个减速器或not@SubhajitPanja您可以将两个A&B组件连接到任意多个还原器。但是，对于一个状态，您只需要一个还原器。然后，您可以连接两个A&B来存储和访问存储区中的数据。这就是Redux的用途。它将集中您的应用程序状态，以便您可以在任何位置访问它。我将编辑我的回答是提供一个示例。@fsociety now Reducer从您的解释中我很清楚。您的回答中只有一个问题；通常我向Reducer发送一个操作，它会将新状态返回到同一组件（假设我有登录表单B组件，并通过mapDispatchToProps和connect函数调用dispatch操作，我总是从reducer返回或回复新状态，并在同一组件中使用状态数据mapStateToProps，但如果我想获得A和B组件的状态，我该如何实现？假设A是我的仪表板组件或其他组件）如何将A&B组件连接到redux存储并同时获取数据？您可以在两个组件中使用MapStateTrops。订阅相同的reducer但如果我有一个仪表板，并且已经存在另一个reducer，在这种情况下，我认为这是不可能的，因为我不知道它（一个组件）可以访问多个减速器或not@SubhajitPanja您可以将两个A&B组件连接到任意多个还原器。但是，对于一个状态，您只需要一个还原器。然后，您可以连接两个A&B来存储和访问存储区中的数据。这就是Redux的用途。它将集中您的应用程序状态，以便您可以在任何位置访问它。我将编辑我的回答提供了一个例子。@fsociety now