React组件间的通信

Posted 2020-09-04 专注WEB前端开发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React组件间的通信相关的知识，希望对你有一定的参考价值。

1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；

2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用；

子组件调用父组件

创建一个简单组件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属性值。

React.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>
            );
        }
    });

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

完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../dist/react/react.js"></script>
    <script src="../../dist/react/JSXTransformer.js"></script>
    <script src="../../dist/jquery/jquery.min.js"></script>
    <!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
    <!--<script src="../../dist/react/JSXTransformer.js"/>-->
</head>
<body>

<div id="index-0331-0011"></div>
<script type="text/jsx">
    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>
            );
        }
    });

    React.render(
            <ImDaddyComponent />,
            document.getElementById(‘index-0331-0011‘)
    );
</script>
</body>
</html>

以上是关于React组件间的通信的主要内容，如果未能解决你的问题，请参考以下文章

React组件间的通信

React工程化——webpack构建react工程化——react脚手架解析——函数组件间的通信父—子——函数组件事件绑定——todolist案例