If you want to use the render method you need to import component from react or access it using 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;
As a side note I would recommend using functional components. You are not using in this component so it's best to use it as a function. Even when you want to use state in a functional component you can then use React Hooks.
Here it is as a functional component:
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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…