Question

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

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

我正在使用

创建上下文

export const TimeZoneContext = createContext("timeZone");

然后在我的退货中将组件的值提供为

<TimeZoneContext.Provider value="timeZone" />

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

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

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

Answer 1

您可以使用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>

如何在实质性UI中实现Context Api

1 个答案: