#javascript #css #reactjs #producer-consumer #context-api
#javascript #css #reactjs #производитель-потребитель #реагировать-контекст
Вопрос:
Я хочу динамически изменять фон моего веб-приложения, поэтому я хочу использовать контекст, который включает контекст. Я получаю эту ошибку: TypeError: рендеринг не является функцией. Это ThemeContext.js:
class BookList extends Component {
render() {
return (
<ThemeContext.Consumer> {(contextTheme) => (
<BookContext.Consumer>
{contextBook => {
const {books} = contextBook;
const { isDarkTheme, dark, light } = contextTheme;
const theme = isDarkTheme ? dark : light;
return (
...
...
)
}}
</BookContext.Consumer>
)}
</ThemeContext.Consumer>
)
}
}
export default BookList;
Это BookList.js так что это компонент.
class ThemeContextProvider extends React.Component {
state = {
isDarkTheme : true,
dark: { bg: '#d2f3df', txt: '#0f0f0f', hover: '#f0f0f0ca'},
light : {bg : '#288888', txt: '#f0f0f0', hover : '#f0f0f0ca'}
}
render() {
return (
<ThemeContext.Provider value={{...this.state}}>
{this.props.children}
</ThemeContext.Provider>
)
}
}
export default ThemeContextProvider;
Это дочерний контекст (BookContext):
import React from 'react';
export const BookContext = React.createContext();
class BookContextProvider extends React.Component {
state = {
...
...
}
render() {
return (
<BookContext.Provider value= {this.state}>
{this.props.children}
</BookContext.Provider>
)
}
}
export default BookContextProvider;
Комментарии:
1. Попробуйте удалить double {{ }} здесь
<ThemeContext.Provider value={{...this.state}}>
только с одним {}2. Когда я удаляю его, я получаю сообщение об ошибке от терминала.
3. Какую ошибку вы получили?
4. «Синтаксическая ошибка: неожиданный токен». если я удалю одну из двух скобок.
Ответ №1:
Если вы хотите использовать метод рендеринга, вам необходимо импортировать компонент из react или получить к нему доступ с помощью React.Компонент:
// import React
import React from 'react';
// create class as extension of React.Component
class BookList extends React.Component {
render() {
return (
<ThemeContext.Consumer> {(contextTheme) => (
<BookContext.Consumer>
{contextBook => {
const {books} = contextBook;
const { isDarkTheme, dark, light } = contextTheme;
const theme = isDarkTheme ? dark : light;
return (
...
...
)
}}
</BookContext.Consumer>
)}
</ThemeContext.Consumer>
)
}
}
export default BookList;
В качестве примечания я бы рекомендовал использовать функциональные компоненты. Вы не используете в этом компоненте, поэтому лучше использовать его как функцию. Даже если вы хотите использовать состояние в функциональном компоненте, вы можете использовать перехватчики реакции.
Здесь это как функциональный компонент:
const BookList = () => {
return (
<ThemeContext.Consumer> {(contextTheme) => (
<BookContext.Consumer>
{contextBook => {
const {books} = contextBook;
const { isDarkTheme, dark, light } = contextTheme;
const theme = isDarkTheme ? dark : light;
return (
...
...
)
}}
</BookContext.Consumer>
)}
</ThemeContext.Consumer>
)
}
export default BookList
Комментарии:
1. Я их знаю. Я не просто поделился ненужными сторонами кода.