时间戳

首页 > 解决方案 > 传递 React 道具并作为 ObjectName.ObjectName 访问

javascript - 传递 React 道具并作为 ObjectName.ObjectName 访问

问题描述

我正在导入一个像这样的对象数组import productData from './productData.js'。

哪里productData.js看起来像：

var productData = [{}, {}, ...]
module.exports = {productData}

TableComponent但是，现在在要映射到数组的组件表达式中，我必须将其作为productData.productData. 为什么是这样？

const MainBody = () => {
  return (
    <TableComponent productData={productData.values}> </TableComponent>
  );
}

const TableComponent = props => {
  const {productData} = props
  const rows = productData.productData && productData.productData.map((row, index) => {
    return (
      <tr>
        <row>hello</row>
      </tr>
    );
  });
  return <tbody>{rows}</tbody>
}

标签： javascriptreactjs

解决方案

如果你

 import productData from './productData.js'

然后productData是 的默认导出，productData.js它是一个对象，这个：

  { productData }

并且该对象有一个productData包含您想要的数据的键。现在只导出productData你有两个选择：

1）导出productData为默认导出而不将其包装到对象中：

 export default productData;
 // or
 module.exports = productData;

 // import as:
 import productData from "./productData";
 // or
 const productData = require("./productData");

2）导出productData为命名导出，然后导入命名导出：

 export { productData };
 // or
 module.exports = { productData };

 // import as
 import { productData } from "./productData";
 // or
 const { productData } = require("/.productData");

由于该文件仅包含一件事，因此 1) 在这里更有意义。

推荐阅读