react 创建组件以及组件通信

import React from 'react'

function NoStatusComp (props) {
  console.log(props)
  return (
    <div>
      <h1>我是无状态组件</h1>
    </div>
  )
}

export default NoStatusComp

import React from 'react'
import {Button} from 'antd'

let createClassComp = React.createClass({
  getInitialState () {
    return {
      text: 'React早期创建组件的方式',
      title: '教师节快乐，感谢生命中出现过的老师，让似水年华没有苍白，教会我们听说读写思',
      num: 0
    }
  },
  componentDidMount () {
    console.log('cmd')
    console.log(this.props)
  },
  componentWillReceiveProps (nextProps) {
    console.log(this.props)
    console.log('下一次')
    console.log(nextProps)
  },
  add () {
    this.num++
  },
  render () {
    let {title, text} = this.state
    return (
      <div>
        <h1>{title}</h1>
        <span>{text}</span>
        <Button onClick={this.add}> 触发方法 </Button>
      </div>
    )
  }
})

export default createClassComp

import React from 'react'
import { Button } from 'antd'

export default class ExtendsComp extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: props.data
    }
  }
  render () {
    return (
      <div>
        <h1>我是新版创建组件的方法</h1>
        <Button> 点我回去</Button>
      </div>
    )
  }
}

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {
    render() {
        return (
            <div>
                <Child name="apple" />
            </div>
        );
    }
}

export default Parent;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class List3 extends Component {
    static propTypes = {
        hideConponent: PropTypes.func.isRequired,
    }
    render() {
        return (
            <div>
                我是字组件
                <button onClick={this.props.show}>点我 展示</button>
            </div>
        );
    }
}

export default List3;

import React, { Component } from 'react'

import Child from './childOneComp'
import ChildTwoComp from './childTwoComp'
import PropTypes from 'prop-types';

class Parent extends Component {
  constructor () {
    super()
    this.state = {
      listArr: [ {
        text: '题目一'
      },
      {
        text: '题目二'
      } ]
    }
  }
  // 提供一个函数,用来返回相应的context对象
  getChildContext () {
    return {
      color: 'red'
    }
  }
  // 父组件声明自己支持context
  static childContextTypes = {
    color: PropTypes.string,
  }
  render () {
    let {listArr} = this.state
    return (
      <div>
        <Child name='Sara' />
        {
          listArr.map((item, index) => {
            return <ChildTwoComp value={item.text} key={index} />
          })
        }

      </div>
    )
  }
}

export default Parent

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import emitter from '../../utils/event'

class ChildTwoComp extends Component {
    // 子组件声明自己要使用context
    static contextTypes = {
        color: PropTypes.string,
    }
    static propTypes = {
        value: PropTypes.string,
    }
    constructor(){
      super()
      this.state ={
        color:'pink'
      }
    }
    componentDidMount() {
      this.eventEmitter = emitter.addListener('colorChange', (color) => {
        console.log('接受了方法');
        this.setState({
          color,
        },()=>{
          console.log(color);
        });
        
    });
    }
    componentWillUnmount() {
      if(typeof this.eventEmitter === 'function'){
        this.eventEmitter.removeListener(this.eventEmitter);
      }
      
  }
    
    render() {
        const { value } = this.props;
        return (
            <div>
              <h1 style={{ background: this.state.color }}>1234567</h1>
               <li style={{ background: this.context.color }}>
                <span>{value}</span>
            </li>
            </div>
           
        );
    }
}

export default ChildTwoComp;

import React from 'react'
import PropTypes from 'prop-types'
import emitter from '../../utils/event'
import { Button } from 'antd'

export default class Child extends React.Component {
  constructor (props) {
    super(props)
    this.changeColor = this.changeColor.bind(this)
  }
  changeColor () {
    emitter.emit('colorChange', 'deepskyblue')
  }
  render () {
    let {name} = this.props
    return (
      <div>
        <h1>Hello, {name}</h1>
        <Button onClick={this.changeColor}> 11111点我回去</Button>
      </div>
    )
  }
}

Child.propTypes = {
  name: PropTypes.string.isRequired
}

import { EventEmitter } from 'events'

export default new EventEmitter()