React组件之间传递数据

知识点

通过state来实现父子之间数据传递

通过props传递

父子传递

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'

class ParentList extends React.Component {
    constructor() {
        super();
        this.state = {
            name:'老张',
            msg:'我是父亲'
        }
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <ChildList data = {this.state}/>
            </div>
        )
    }
}
class ChildList extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <h1>我是子组件</h1>
                <p>{this.props.data.name}</p>
                <p>{this.props.data.msg}</p>
            </div>
        )
    }
}
 

ReactDOM.render(<ParentList />, document.getElementById('app'));

　父子孙传递

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'



var data=[{name:'a',id:1},{name:'b',id:2},{name:'c',id:3}];

class ParentList extends React.Component {
    render() {
        return (
            <div>
                <h1>父组件</h1>
                {
                    this.props.data.map(function(item,index) {
                       return <ChildList key = {index} {...item }/>
                    }) 
                }
            </div>
        )
    }
}
class ChildList extends React.Component {
    render() {
        return (
            <div>
                <span>子组件： {this.props.name}</span>
                <SunList text={this.props.name}/>
            </div>
        )
    }
}
class SunList extends React.Component {
    render() {
        return <button>孙组件：{this.props.text}</button>
    }
}


ReactDOM.render(<ParentList data = {data}/>, document.getElementById('app'));

 子调用父控件中方法

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'

class ParentList extends React.Component {
    constructor() {
        super();
        this.state = {
            name:'父组件'
        }
    }
    handleChange(e) {
        this.setState({
            name:e.target.value
        });
    }
    handleParent(obj) {
        this.setState({
            name:obj.name
        });
    }
    render() {
        return (
            <div>
                <p> {this.state.name} </p> 
                <input type="text" onChange={(e)=>this.handleChange(e)} value={this.state.name}/>   

                <ChildList {...this.state} handle={ this.handleParent.bind(this)}/>        
            </div>
        )
    }
}
class ChildList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name:props.name
        }
    }
    handleChange(e) {
        this.setState({
            name:e.target.value
        });
        this.props.handle({name:e.target.value}); // 调用父组件handle方法
    }
    render() {
        return (
            <div>
                <h1>{this.state.name}</h1>
                <input type="text" value={this.state.name} onChange={this.handleChange.bind(this)}></input>
            </div>
        )
    }
}
 
ReactDOM.render(<ParentList />, document.getElementById('app'));

 子传递参数到父组件

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'

class ParentList extends React.Component {
    constructor() {
        super();
        this.state = {
            checked: false
        }
    }

    handleParent(value,str) {
        this.setState({
            checked: value
        });
        console.log(str);
    }
    render() {

        return (
            <div>
                <p> {this.state.checked == false?"未选中":'选中'} </p>

                <ChildList {...this.state} handle={this.handleParent.bind(this)} />
            </div>
        )
    }
}
class ChildList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.checked
        }
    }
    handleChange(str) {
        this.setState({
            name: !this.state.name
        });
        this.props.handle(!this.state.name,str); // 调用父组件handle方法
    }
    render() {
        return (
            <div>

                <input type="checkbox" value={this.state.name} onChange={this.handleChange.bind(this,'参数')}></input>
            </div>
        )
    }
}

ReactDOM.render(<ParentList />, document.getElementById('app'));

 兄弟间传递

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom'

 class ParentList extends React.Component {
     constructor() {
         super();
         this.state = {
             name:'父组件'
         }
     }
     handleParent(data) {
        this.setState({
            name:data
        });
     }
    render() {
        return (
            <div>
                <ChildListA handle = {this.handleParent.bind(this)}/>
                <ChildListB data={this.state.name}/>
            </div>
        )
    }
 }

 class ChildListA extends React.Component {
   
    constructor() {
        super();
    }
   render() {
       return (
           <div>
                <button onClick={()=>this.props.handle('子组件')}>兄弟传递</button>
           </div>
       )
   }
}

class ChildListB extends React.Component {
    constructor() {
        super();
    }
   render() {
       return (
           <div>
               {this.props.data}
           </div>
       )
   }
}

ReactDOM.render(<ParentList />, document.getElementById('app'));