有没有一种方法可以使react上下文只读

Question

我希望将上下文传递给其他react组件，但不允许它们实际调整值。

我的最佳猜测是提供一个函数，以类似getter的方式检索值。尽管用户仍然可以调整功能，但他们将无法修改项目的实际值。

Answer 1

是的，您可以通过只读提供程序创建只读上下文。

例如(我的数据是农民列表(：

const FarmersContext = React.createContext();
function FarmersProvider({ children }) {
const [farmers, setFarmers] = React.useState(null);
return (
<FarmersContext.Provider value={farmers}>
<FarmerFetcher setFarmers={setFarmers} />
{children}
</FarmersContext.Provider>
);
}

FarmersProvider的子代可以通过以下方式访问数据：

const farmers = React.useContext(FarmersContext)

他们只能访问farmers，而不能访问setFarmers，因此此数据是只读的。

另一方面，FarmerFetcher可以通过其道具访问setFarmers，因为必须有人在某个时候获取数据。但如果您愿意，可以在FarmersProvider内完成。