React組件間的通訊

時間 2019-11-05

標籤 react 組件通訊欄目 React 简体版

原文原文鏈接

一、子組件調用父組件，採用props的方式進行調用和賦值，在父組件中設置相關屬性值或者方法，子組件經過props的方式進行屬性賦值或者方法調用；html

二、父組件調用子組件，採用refs的方式進行調用，須要父組件在調用子組件的時候，添加ref屬性，並進行惟一命名，在父組件中便可調用；react

子組件調用父組件

建立一個簡單組件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便可。jquery

建立一個父組件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')
);

以上就完成了子組件調用父組件的屬性及方法。this

父組件調用子組件

要調用子組件的方法或者屬性，須要在調用子組件的時候定義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>
            );
        }
    });

以上，就完成父組件調用子組件。spa

完整代碼：

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。