Question

我试图在同一个jsx文件中创建一些组件。我想将一个子组件连接到存储（这里感觉不对），而不将HOC组件连接到商店。因此，在连接子组件时，他不使用导出默认连接。它会产生错误，指出操作未定义。

示例代码。

class Test1 extends React.Component {
   constructor(props) {
   ****
   } 
   render(){
   ****
   }
}
function mapActionsToProps(dispatch) {
   return {
       actions: {
          testAction: bindActionCreators(testActionFromActions, dispatch)
       }
   }
connect(mapStateToProps,mapActionsToProps) (Test1);

class Test2 extends React.Component {
   constructor(props){
   ***
   }
   render(){
      return (<Test1/>);
   }
}

export default Test2;

我的问题是为什么我们总是需要使用连接作为导出默认连接？有没有其他方法可以进行连接？。

提前谢谢。

Answer 1

connect（）返回一个新连接的组件。事实上，connect（）将您的组件包装成一个新组件，添加一些有用的功能，这就是您通常导出connect函数（新组件）的返回值的原因。

在您的情况下，您应该执行类似

的操作

class Test1 extends React.Component {
   constructor(props) {
   ****
   } 
   render(){
   ****
   }
}
function mapActionsToProps(dispatch) {
   return {
       actions: {
          testAction: bindActionCreators(testActionFromActions, dispatch)
       }
   }
const ConnectedTest1 = connect(mapStateToProps,mapActionsToProps) (Test1);

class Test2 extends React.Component {
   constructor(props){
   ***
   }
   render(){
      return (<ConnectedTest1/>);
   }
}

export default Test2;

Answer 2

经过一些研究，我发现了一种治疗方法：D。

connect始终返回一个函数。在我给出的示例中，我输入Test1作为connect函数的参数。

因此我们需要将返回的函数分配给某些变量或 const 。在上面的示例中，行 connect（mapStateToProps，mapActionsToProps）（Test1）; 应更改为 const ConnectedComponent = connect（mapStateToProps，mapActionsToProps）（Test1）; 。之后，我可以导出组件（ConnectedComponent）或在同一文件中重用它。

this链接可以帮助我理解这一点。

希望这个答案可以帮助别人。

将react组件连接到redux store时，“export default connect”的必要性是什么

2 个答案: