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

前端之家收集整理的这篇文章主要介绍了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>
    );
}
}

猜你在找的React相关文章