深入了解React（七、容器式组件方式组合-1）

import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class Component extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: 'Yuusuke',
            age: 18
        };
    }

    handleClick() {
        this.setState({
            age: this.state.age + 1
        })
    }

    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }

    render() {
        return (
            

                
I am {this.state.name}
                
I am {this.state.age} years old!
                

                     {
                        this.handleClick
                    }}>年龄加一
                    
                
                

                     {
                        this.handleClick()
                    }}>年龄加一
                    
                
                

                     {
                        this.handleClick(e)
                    }}>年龄加一
                    
                
                
 {
                    this.onValueChange(e)
                }}/>
            
        );
    }
}

class Title extends React.Component {
    constructor(props) {
        console.log('constructor---props：', props);
        super(props);
        console.log('constructor---props：', props);
    }

    render(props) {
        console.log('render---props：', props);
        return 
{this.props.title}
    }
}

class App extends React.Component {
    render() {
        return (
            

                
                

                
            
        );
    }
}

ReactDOM.render(
    

        {/**/}
        
    
,
    document.getElementById('app')
);