TypeError：render 不是函数 Context Api Multiple Context

问题描述

我想动态更改 Web 应用程序的背景，因此我想使用包含上下文的上下文。我收到此错误：TypeError：render is not a function。 这是 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;

解决方法

如果你想使用 render 方法，你需要从 react 中导入组件或者使用 React.Component 访问它：

// 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;

作为旁注，我建议使用功能组件。您不在此组件中使用，因此最好将其用作函数。即使您想在功能组件中使用状态，您也可以使用 React Hooks。

这里是一个功能组件：

const BookList = () => {
return (
            <ThemeContext.Consumer> {(contextTheme) => (
                <BookContext.Consumer>
                    {contextBook => {

                        const {books} = contextBook;
                        const { isDarkTheme,light } = contextTheme;
                        const theme = isDarkTheme ? dark : light;  
                        return (
                        ...
                        ...
                         )
                    }}
                </BookContext.Consumer>
            )}
            </ThemeContext.Consumer>

        )
}

export default BookList