react的传值

来源：互联网发布：ido软件下载中文版编辑：程序博客网时间：2024/05/21 09:36

React组件间的通信分为三种情况：
1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；
2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用；
3、使用全局事件 Pub/Sub 模式，在 componentDidMount 里面订阅事件，在 componentWillUnmount 里面取消订阅，当收到事件触发的时候调用 setState 更新 UI。（这里暂时没有学习)

一、子组件调用父组件

创建一个简单组件ButtonComment，调用此组件是需传递参数buttonName，并创建初始化方法getInitialState及点击事件sendSword ：

var ButtonComment = React.createClass({    getInitialState: function () {            return {count:0};        },        //点击发宝刀。。。        sendSword: function () {            var newCount = this.state.count + 1;            this.setState({ count:newCount });            //通过props调用父组件的方法            this.props.getSwordCount(newCount );        },       render: function () {           return (                <button  onClick={this.sendSword}>{this.props.buttonName}</button>           );       }    });

点击按钮，将会调用sendWord方法，更改count的状态，并调用父组件的方法getSwordCount，这时将会重新渲染页面，如果不想重新渲染请重写方法shouldComponentUpdate: function (nextProps,nextState){}并返回false即可。

创建一个父组件ImDaddyComponent，并将属性buttonName及方法getSwordCount传递给子组件ButtonComment：

var ImDaddyComponent = React.createClass({        getInitialState: function () {            return {sendCount:0};        },        getSwordCount: function (newCount) {            this.setState({sendCount:newCount});        },        render: function () {            return (                <div>                    <ButtonComment getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>                    <p>                        父子俩共送{this.state.sendCount}把宝刀！！！                    </p>                </div>            );        }    });

进行页面的渲染，点击”儿子送宝刀”按钮时，将会计算送宝刀数量，并通过this.props.getSwordCount(newCount );传递给父组件，更改state属性值。

ReactDOM.render(            <ImDaddyComponent />,            document.getElementById('index-0331-0011')    );

以上就完成了子组件调用父组件的属性及方法。

二、父组件调用子组件

要调用子组件的方法或者属性，需要在调用子组件的时候定义ref属性，且唯一，更新ImDaddyComponent 如下：

var ImDaddyComponent = React.createClass({        getInitialState: function () {            return {sendCount:0};        },        //通过refs方式调用子组件的方法sendSword        sendSword: function () {            this.refs.getSwordButton.sendSword();        },        getSwordCount: function () {        //通过refs方式调用子组件的属性count            this.setState({sendCount:this.refs.getSwordButton.state.count + 1});        },        render: function () {            return (                <div>                //此处需要定义ref属性，且值唯一                    <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>                    <button onClick={this.sendSword}>通过老爸送宝刀</button>                    <p>                        父子俩共送{this.state.sendCount}把宝刀！！！                    </p>                </div>            );        }    });

以上，就完成父组件调用子组件。

完整代码：

 var ButtonComment = React.createClass({        getInitialState: function () {            return {count:0};        },        sendSword: function () {            var newCount = this.state.count + 1;            this.setState({count:this.state.count + 1});            this.props.getSwordCount();        },       render: function () {           return (                <button onClick={this.sendSword}>{this.props.buttonName}</button>           );       }    });    var ImDaddyComponent = React.createClass({        getInitialState: function () {            return {sendCount:0};        },        sendSword: function () {            this.refs.getSwordButton.sendSword();        },        getSwordCount: function () {            this.setState({sendCount:this.refs.getSwordButton.state.count + 1});        },        render: function () {            return (                <div>                    <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>                    <button onClick={this.sendSword}>通过老爸送宝刀</button>                    <p>                        父子俩共送{this.state.sendCount}把宝刀！！！                    </p>                </div>            );        }    });    ReactDOM.render(            <ImDaddyComponent />,            document.getElementById('app')    );

0 0