时间戳

首页 > 解决方案 > 如何在 Material UI 中实现 Context Api

javascript - 如何在 Material UI 中实现 Context Api

问题描述

我试图在我的组件中使用上下文 API 传递一个属性。我收到以下打字稿错误。

“字符串”类型上不存在属性“值”

我正在使用创建上下文

export const TimeZoneContext = createContext("timeZone");

然后在我的回报中为组件提供值

<TimeZoneContext.Provider value="timeZone" />

我正在使用以下语句在另一个组件的 return 语句中使用该值

 <TimeZoneContext.Consumer>
        {({ value }) => (
          <TableCell className={classes.tableCell}>{value}</TableCell>
        )}
      </TimeZoneContext.Consumer>

请随时询问所需的更多信息。谢谢。实现嵌套上下文 API 与简单的 API 有何不同。我认为问题在于提供者和消费者中的组件不共享关系。谢谢

标签： javascriptreactjstypescriptfrontendmaterial-ui

解决方案

您可以使用 useContext 挂钩来检索值。

这是您修改的代码

https://codesandbox.io/s/material-demo-sb27x?fontsize=14

export const TimeZoneContext = createContext("timeZone"); 

ReactDOM.render( <TimeZoneContext.Provider value="PST"><App/> </TimeZoneContext.Provider>, 
                 document.querySelector('#root'));

//In your App.js you should see value 'PST'
const context = useContext(TimeZoneContext);

// You can use value in the context in className
<Table className={classes[context]}> 
// Use value in TableCell
<TableCell>{context}</TableCell>

推荐阅读