组件嵌套组件，嵌套子组件点击事件跳转

---

1. 功能

想在一个组件返回另外一个组件，其中另外一个组件的点击事件中，可以触发多个调转页面，如果一个集群下有多个主机，每点击一个主机时就会跳转到这个主机的详细信息

2. 案例

2.1 案例注意

• 在子组件中必须传入属性this.props.charent,否则在点击事件只能触发其函数，只有引入子的标记时才能生效
• 在父组件返回自组件时，需将跳转标记计入其中
• 在组件div中引用变量时，通常采用{this.state.p1}语法形式，只有引用大括号才能表示此为

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

class Toggle extends React.Component{
    state = {flag:true};
    handleClick(event){
        console.log(event.target.id);
        console.log(event.target === this);
        console.log(this);
        console.log(this.state);
        console.log("`````````````````````")
        console.log(this.props.children)
        console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
        this.setState({flag:!this.state.flag});
    }

    render(){
        return (
        <button id="t1" onClick={this.handleClick.bind(this)}>
            点击这句话{this.state.flag.toString()}
            { this.props.children} 
            {/* 必须添加this.props.children才能调用这个buttorn的子组件 */}
        </button>);
    }
}

class Root extends React.Component {
    state = {
        p1:"magedu",
        p2:".com"
    };

    render(){
        setTimeout(()=>this.setState({p1:"magedu.com"}),5000)
    return (
        <div>
            <div>welcome to magedu.com: {this.state.p1} {this.state.p2}</div>
            <Toggle school="magedu.com" parent="this"> 
            {/* 下面的a标签在组件Toggle中的子 */}
            <a href="http://www.taobao.com"> 淘宝 </a>
            <a href="http://www.jd.com"> 京东 </a>
            {/* <a>xuewei</a> */}
            </Toggle>
        </div>);
    }
}

ReactDom.render(<Root />, document.getElementById('root'))

2.2 效果图

2.3 备注

在实际项目中需要多加练习和不停的测试

3. 动态给组件添加属性

3.1 父亲给儿子添加属性

上述代码父亲组件中返回儿子组件时动态给儿子添加属性

 <div>
            <div>welcome to magedu.com: {this.state.p1} {this.state.p2}</div>
            {/* 添加属性 */}
            <Toggle school="magedu.com" parent="this"> 
            {/* 下面的a标签在组件Toggle中的子 */}
            <a href="http://www.taobao.com"> 淘宝 </a>
            <a href="http://www.jd.com"> 京东 </a>
            {/* <a>xuewei</a> */}
            </Toggle>
        </div>);

3.2 类似装饰器方法添加组件

通过高阶函数动态添加组件

export default class Reg extends React.Component{
    render(){
        return <_Reg servie={userServer} />
    }
}

class _Reg extends React.Component{
    handleClick(event){
        event.preventDefault();
        let fm = event.target.form;
        this.props.servie.reg(fm[0].value)
    }
    render(){
        if (this.props.servie.loggedin){
            return <Redirect to="/">
        }

        return(
            <div>{this}</div>
        )
    }
}