Question

因此，我一直在阅读有关使用react上下文以避免钻取道具的信息。一个基本示例是有一个组件，该组件提供的值本身保持在Component状态：

<ThemeContext.Provider value={this.state.shared, updateMyState}>

和使用该值的使用者。

我可以代替共享导出列表的值，还是应该为提供方提供的组件始终引用其状态或静态值？

这是我的意思：

文件./列表：

export const list = [];
export const updateList = (val) => list.push(val);

文件./提供者：

import Provider from './provider'
import {list, updateList} from ./list

{Provider, Consumer} = React.createContext();
export ProviderComponent = () => 
   <Provider value={list, updateList}>
      <children>
   </Provider>
}

Answer 1

是的，可以。如果您担心多次导入模块会创建列表对象的多个实例，则在进行类似import { a, b } from './file的导入时，./file仅被引用一次（Check out this stackoverflow answer）。

我认为您的语法略有不同，应该是

<Provider value={{ list, updateList }}>

可以使用React.context共享一个公共对象吗？

1 个答案: