| 1 | import React from 'react'; |
| 2 | import {useContext} from 'react'; |
| 3 | import {connect} from 'react-redux'; |
| 4 | |
| 5 | import ThemeContext from './shared/ThemeContext'; |
| 6 | import lazyLegacyRoot from './lazyLegacyRoot'; |
| 7 | |
| 8 | // Lazy-load a component from the bundle using legacy React. |
| 9 | const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting')); |
| 10 | |
| 11 | function AboutPage({counter, dispatch}) { |
| 12 | const theme = useContext(ThemeContext); |
| 13 | return ( |
| 14 | <> |
| 15 | <h2>src/modern/AboutPage.js</h2> |
| 16 | <h3 style={{color: theme}}> |
| 17 | This component is rendered by the outer React ({React.version}). |
| 18 | </h3> |
| 19 | <Greeting /> |
| 20 | <br /> |
| 21 | <p> |
| 22 | Counter: {counter}{' '} |
| 23 | <button onClick={() => dispatch({type: 'increment'})}>+</button> |
| 24 | </p> |
| 25 | </> |
| 26 | ); |
| 27 | } |
| 28 | |
| 29 | function mapStateToProps(state) { |
| 30 | return {counter: state}; |
| 31 | } |
| 32 | |
| 33 | export default connect(mapStateToProps)(AboutPage); |