时间戳

首页 > 解决方案 > 如何从导出对象中提取方法

reactjs - 如何从导出对象中提取方法

问题描述

在我connector.js有一个带有 2 种方法的对象。我只是导出洞对象以在将来提取各个方法。但不起作用。我有什么问题吗？

连接器.js

const triggers = {
  add: function mapStateToProps(state) {
    return {};
  },
  remove: function countReducer(dispatch) {
    return {
      decount: () => {
        const action = { type: "DECREASE" };
        dispatch(action);
      }
    };
  }
};

export default triggers;

试图获取方法......但不起作用。

import React from "react";
import { connect } from "react-redux";
import triggers, { add, remove } from "./connectors"; //what is wrong here?

const Decounter = props => {
  return (
    <div>
      <h1>I am Decounter!!</h1>
      <button onClick={props.decount}>Decrement</button>
    </div>
  );
};

export default connect(
  add,
  remove
)(Decounter);

如果我使用triggers.add or triggers.remove- 工作正常。

标签： reactjsecmascript-6

解决方案

实际上，您将整个对象导出为默认值，因此您无法将其参数导入命名。

#1 方法：您可以按原样执行，但在文件顶部对其进行解构：

import triggers from "./connectors";

const { add, remove } = triggers;

#2 方法：使用命名函数并直接导出它们：

export const add = function mapStateToProps(state) {
    return {};
};

export const remove = function countReducer(dispatch) {
  return {
    decount: () => {
      const action = {
        type: "DECREASE"
      };
      dispatch(action);
    }
  }
};

然后导入：

import { add, remove } from './connectors';

希望它会有所帮助。

推荐阅读