react组件之间通信（React传递参数的几种方式）

// 父组件
 render() {
        return (
                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>
            )
    } 

//子组件　
//通过this.props.toson就可以获取到父组件传递过来的数据 

tograndson={this.props.toson}

//孙子组件
export default class Grandson extends Component{
    render(){
        return (
            <li style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：
                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </li>
        )
    }
};
 
//子组件
export default class Child extends Component{
    render(){
        return (
            <li style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </li>
        )
    }
};
 
//父组件
export default class Parent extends Component{
 
    constructor(props){
        super(props)
        this.state={
            username: '',
            sex: ''
        }   
    },
    handleVal(event){
        this.setState({username: event.target.value});
    },
    handleSelect(value) {
        this.setState({sex: event.target.value});
    },
    render(){
        return (
            <li style={{border: "1px solid #000",padding: "10px"}}>
                <li>用户姓名：{this.state.username}</li>
                <li>用户性别：{this.state.sex}</li>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </li>
        )
    }
}

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter> 

<li  onClick={el =>　this.props.history.push({
　　　pathname:'/detail',
    　 state:{id:3}
})}
>
</li>

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <li>
        <Header />
        <Main />
      </li>
    )
  }
}

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>标题</h1>
    )
  }
}