时间戳

首页 > 解决方案 > 数据模拟的反应解析器

javascript - 数据模拟的反应解析器

问题描述

我想使用react-resolver模块来使用我的数据模拟，但我不确定我做错了什么。

目前我有以下情况工作正常

我有我的数据对象：

const data = [
  {
    team: "TeamA",
    position: "dx",        
    active: "No",
  },
  {
    team: "TeamB",
    position: "dx",        
    active: "Yes",
  },
  {
    team: "TeamC",
    position: "sx",        
    active: "No",
  },
  {
    team: "TeamD",
    position: "dx",        
    active: "No",
  },
  {
    team: "TeamE",
    position: "dx",        
    active: "No",
  }
]

我可以映射它并在我的表组件的行中呈现这个数据对象，比如rows={renderRows(data)}

现在我想使用react-resolver，我已经创建了一个 Mock 文件夹，我已经放置了我的数据对象。

这就是现在的样子

import { resolver } from "../../path/of/my/resolver";

export const newDataResolver = resolver({

    const data = [
      {
        team: "TeamA",
        position: "dx",        
        active: "No",
      },
      {
        team: "TeamB",
        position: "dx",        
        active: "Yes",
      },
      {
        team: "TeamC",
        position: "sx",        
        active: "No",
      },
      {
        team: "TeamD",
        position: "dx",        
        active: "No",
      },
      {
        team: "TeamE",
        position: "dx",        
        active: "No",
      }
    ]

});

我现在像这样在我的组件中导入它

import { newDataResolver } from "../Mock"

我现在如何newDataResolver在我的renderRowsnow 中使用从模型导入的对象？

这是一个非常基本的问题，但我正在努力。我现在想做类似的事情rows={renderRows(newDataResolver)}

标签： javascriptreactjsmockingresolver

解决方案

尝试使用装饰器语法：

import { resolve } from "react-resolver";

const data=[...]

@resolve("newData", function(props) {
  return data
})
class SomeComponent extends React.Component {
  render() {
    const { newData } = this.props;

    return <SomeOtherComponent {renderRows(newData)} />
  }
}

这相当于异步加载newData并提供给组件，就好像它是直接提供的一样：

<SomeComponent newData={newData} />

编辑：为了实现您的意图：

import { newDataResolver } from "../Mock"

 export default newDataResolver(SomeComponent)

推荐阅读