react组件与组件之间的数据传递

父组件传递子组件

常规的数据传递方式就是父传子，子组件直接通过this.props来使用。

子组件传递父组件

子组件通过父组件的事件方法来传递
例如:

父组件：

 export default class Search extends Component {
constructor(props) {
    super(props);    

    this.state = {
        serviceView: []
    }
    
    this.setServiceView = this.setServiceView.bind(this);
    this.clickAction = this.clickAction.bind(this);
 

 }
/**
 * 设置服务视图数据
 *
 * @param {[type]} data [description]
 */
setServiceView(data) {
    this.setState({
        serviceView: data
    });
}

clickAction() {
    this.refs.timebar.childMethod();
}

render() {
    return (
        <div>
             <button onClick={this.clickAction}></button>
             <Timebar ref="timebar" setServiceView={this.setServiceView} ref="timebar" />
             <ServiceView  treeData={this.state.serviceView}  />
        </div>
    );
}
}

子组件:

export default class Timebar extends Component {

constructor(props) {
    super(props);   
    this.state = {
        serviceView = [1, 2];
    };  
}

childMethod () {
    console.log("我是子组件的方法");
}

componentDidMount() {
    this.props.setService(this.props.servicew)
}
render() {
    return (
        <div></div>
    );
}
}