React子组件

App.js

import React, { Component } from 'react';
import Son from './Son.js'

class App extends Component {
  constructor () {
    super ();
    this.state = {
      age : 12,
      name : 'Mike'
    }
  }
  render() {
    const { age, name } = this.state;

    return (
      <div>
        我是APP
        <hr/>
    <Son age = { age } name = {name} header={<div>头部</div>} footer={<div>底部</div>} >
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </Son>
      </div>
    );
  }
}

export default App;

Son.js

import React, { Component } from 'react';
import { red } from 'ansi-colors';

class Son extends Component {
    // 属性的约定和默认值
    
    constructor(props) {
        super(props);
    }
    render() {
        const { age, name, header, footer } = this.props; 
        console.log(this.props.children) // 对应DOM元素
        return (
            <div>
                我是子组件，数据如下
                <hr/>
                { name } { age }

                <div style= { {backgroundColor : 'red'}}>
                    { header }
                </div>
                { this.props.children }

                <div style= { {backgroundColor : 'green'}}>
                    { footer }
                </div>
            </div>
        );
    };
}

export default Son;