| 1 | import React from 'react'; |
| 2 | import {Component} from 'react'; |
| 3 | import {findDOMNode} from 'react-dom'; |
| 4 | import {Link} from 'react-router-dom'; |
| 5 | import {connect} from 'react-redux'; |
| 6 | import {store} from '../store'; |
| 7 | |
| 8 | import ThemeContext from './shared/ThemeContext'; |
| 9 | import Clock from './shared/Clock'; |
| 10 | |
| 11 | store.subscribe(() => { |
| 12 | console.log('Counter:', store.getState()); |
| 13 | }); |
| 14 | |
| 15 | class AboutSection extends Component { |
| 16 | componentDidMount() { |
| 17 | // The modern app is wrapped in StrictMode, |
| 18 | // but the legacy bits can still use old APIs. |
| 19 | findDOMNode(this); |
| 20 | } |
| 21 | render() { |
| 22 | return ( |
| 23 | <ThemeContext.Consumer> |
| 24 | {theme => ( |
| 25 | <div style={{border: '1px dashed black', padding: 20}}> |
| 26 | <h3>src/legacy/Greeting.js</h3> |
| 27 | <h4 style={{color: theme}}> |
| 28 | This component is rendered by the nested React ({React.version}). |
| 29 | </h4> |
| 30 | <Clock /> |
| 31 | <p> |
| 32 | Counter: {this.props.counter}{' '} |
| 33 | <button onClick={() => this.props.dispatch({type: 'increment'})}> |
| 34 | + |
| 35 | </button> |
| 36 | </p> |
| 37 | <b> |
| 38 | <Link to="/">Go to Home</Link> |
| 39 | </b> |
| 40 | </div> |
| 41 | )} |
| 42 | </ThemeContext.Consumer> |
| 43 | ); |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | function mapStateToProps(state) { |
| 48 | return {counter: state}; |
| 49 | } |
| 50 | |
| 51 | export default connect(mapStateToProps)(AboutSection); |