javascript - 如何将变量(实际上是一个列表)导出到类内函数中的其他 .js 文件

Question

如何将类内函数内修改的变量或列表导出到其他.js文件？

renderBoxContent = () => {

  let total = 0;
  let Total = 0;
  let itemList = [];
  let  data = [];

  this.state.availableItems.map((items)=> {

      if(items.purchase > 0){
       Total += items.price*items.purchase;
       total = items.price*items.purchase;
       console.log(items.purchase);
       console.log(total);

          data.push(
          {
            key: items.name,
            name: items.name,
            // src: items.image,
            singlePrice: items.price.toFixed(2),
            purchase: items.purchase,
            totalItemPrice: total.toFixed(2),
          }
        )
      }
  })


  //how to export 'data' to other .js file?

  itemList.push(  <Table defaultExpandAllRows={false} locale={{emptyText: 'Empty Cart'}} style={{background: '#ffffff'}} pagination={false} columns={column} dataSource={data} size="small" />)
  itemList.push( <h3 style={{paddingLeft:15,paddingTop:20}}>    Total     {Total.toFixed(2)}</h3>)
  return itemList;
 }

应该能够访问和导入其他 .js 文件中的“数据”列表变量

Answer 1

使用 React Context 怎么样？ ？

首先创建并导出您的上下文

export const DataContext = React.createContext();

将您的组件包装在提供程序组件中并为其提供您的数据

<DataContext.Provider value={data}>

并在其他组件中像这样使用它

import DataContext from '...' // add your path
const data = useContext(DataContext)

如果您的组件是彼此的 parent 或祖 parent ，我建议您 pass the value as props between components反而。