React 入门及组件之间传值

       最近，有一个很火的前端框架--React，可谓万众瞩目。它的前身是FaceBook的内部项目，最后完善开源，贡献巨大，致敬。另外，国内淘宝基于react开源了ant design，功劳也不小，具体可参考Ant Design的官网：https://ant.design/docs/react/introduce。直奔主题，下面结合个人使用经验及网上查阅的一些资料，对其做简要介绍。希望对初学者有所帮助。

一、组件之间相互传值

1.子组件向父组件传值

 

//子组件
var ChildComment = React.createClass({
	getInitialState: function () {
       return {count:0};
    },
	//点击传值给父组件
	sendTimes: function () {
		var newCount = this.state.count + 1;
		this.setState({ count:newCount });
		//通过props调用父组件的方法
		this.props.getClickCount(newCount);
	},
   render: function () {
	   return (
			<button  onClick={this.sendTimes}>{this.props.buttonName}</button>
	   );
   }
});

//父组件
var ParentComponent = React.createClass({
	getInitialState: function () {
		return {sendCount:0};
	},
	getClickCount: function (newCount) {
		this.setState({sendCount:newCount});
	},
	render: function () {
		return (
			<div>
				<ChildComment getClickCount={this.getClickCount} buttonName="点我有惊喜"/>
				<p>
					共点击{this.state.sendCount}次！
				</p>
			</div>
		);
	}
});

 
2.父组件向子组件传值

//父组件
var ParentComponent = React.createClass({
        getInitialState: function () {
            return {sendCount:0};
        },
        //通过refs方式调用子组件的方法
        sendTimes: function () {
            this.refs.getCountButton.sendCountFunc();
        },
        getSendCount: function () {
            //通过refs方式调用子组件的属性
            this.setState({sendCount:this.refs.getCountButton.state.count + 1});
        },
        render: function () {
            return (
                <div>
                    //定义ref属性且值必须唯一
                    <ChildComment ref="getCountButton" getSendCount={this.getSendCount} buttonName="点我有惊喜"/>
                    <button onClick={this.sendTimes}>父组件调用子组件</button>
                    <p>
                        共点击{this.state.sendCount}次！
                    </p>
                </div>
            );
        }
});

//子组件
var ChildComment = React.createClass({
		getInitialState: function () {
            return {count:0};
        },
        //点击调用
        sendCountFunc: function () {
            var newCount = this.state.count + 1;
            this.setState({ count:newCount });
            //通过props调用父组件的方法
            this.props.getSendCount(newCount );
        },
       render: function () {
           return (
                <button  onClick={this.sendCountFunc}>{this.props.buttonName}</button>
           );
       }
});

 二、类似于get方式传参

       JS中我们常常用get方式传参，如：http://www.baidu.com?param=123&type=3，在react中也可以如此传值，那接收页面如何取值呢？看下面：

let query = this.props.location.query;
let param= query.param;
let type = query.type;

 

       如上，可取出传递的参数。React还有一些基本应用，待后续追加介绍。

 

    

评论

1 楼 孤独水寒cbq 2018-12-12  

如有疑问，可以留言