javascript - 传递 React props 并作为 ObjectName.ObjectName 进行访问

Question

我正在导入一个对象数组，例如从'./productData.js'导入productData。

其中 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>
}

Answer 1

如果你

 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) 在这里更有意义。