TypeError: рендеринг не является функцией контекста Api с несколькими контекстами

#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