Как реализовать Context Api в пользовательском интерфейсе материала - PullRequest
Новая
       26

Как реализовать Context Api в пользовательском интерфейсе материала

1 голос
/ 12 июня 2019

Я пытаюсь передать свойство, используя контекстный API в моих компонентах. Я получаю следующую ошибку машинописи.

Свойство 'value' не существует для типа 'String'

Я создаю контекст, используя 

export const TimeZoneContext = createContext("timeZone");

Затем укажите значение в моем возврате для компонента как 

<TimeZoneContext.Provider value="timeZone" />

Я использую значение в операторе возврата другого компонента, используя следующий оператор 

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

Пожалуйста, обращайтесь за дополнительной информацией. Благодарю. Чем реализация вложенного контекста API отличается от простого. Я думаю, что проблема заключается в том, что компоненты в поставщике и потребителе не имеют общего отношения. Спасибо

1 Ответ

0 голосов
/ 12 июня 2019

Вы можете использовать ловушку 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>
...