React之元件巢狀

阿新 • • 發佈：2019-01-27

在React元件中，父元件向子元件通訊，是通過屬性的方法，而子元件向父元件通訊，則是使用間接委託的方式。
例如，在子元件中觸發一個方法，通過呼叫父元件中對應的函式，來與父元件進行通訊：

這裡寫圖片描述

程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="react.js"></script>
    <script 
 src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" 
></script>
</head>
<body>
    <div id="demo"></div>
    <script type="text/babel">
        var GenderSelect=React.createClass({
            render:function(){
                return <select onChange={this.props.handleSelect}>
                <option value="0" 
>男</option>
                <option value="1">女</option>
                </select>
            }
        });
        var SignupForm=React.createClass({
            getInitialState:function(){
                return{
                    name:'',
                    password:'',
                    gender:'',
                }
            },
            handleChange:function(key,event){
                var newState={};
                newState[key]=event.target.value;
                console.log("newState:"+JSON.stringify(newState));
                this.setState(newState);
            },
            handleSelect:function(event){
                this.setState({gender:event.target.value})
            },
            render:function(){
                console.log(this.state)
                return <form>
                <input type="text" placeholder="Name" onChange={this.handleChange.bind(this,'name')} />
                <input type="password" placeholder="password" onChange={this.handleChange.bind(this,'password')} />
                <GenderSelect handleSelect={this.handleSelect} />
                </form>
            }
        });
        ReactDOM.render(<SignupForm></SignupForm>,document.getElementById('demo'))
    </script>
</body>
</html>

在這段程式碼中， SignupForm是父元件，GenderSelect是子元件。
注意這兩行：

<input type="text" placeholder="Name" onChange={this.handleChange.bind(this,'name')} />
<input type="password" placeholder="password" onChange={this.handleChange.bind(this,'password')} />

這裡，onChange 進行了 bind() 繫結。

1. bind() 的第一個引數this,代表當前的this指向的元件，這樣在父元件中使用handleChange()的時候，就可以保證指明this.
如果改成<input type="text" placeholder="Name" onChange={this.handleChange.bind(this.state,'name')} />，則在父元件的handleChange()函式中，this就指向this.state

2. bind()第二個引數，將會傳入到父元件中。handleChange() 的第二個引數key上，因為這裡存在兩個input，所以必須通過key告訴父元件，該改變的是哪一個input標籤的狀態，因為資料是通過父元件傳送給伺服器的，所以子元件若是改變狀態，則必須告訴父元件，通過父元件傳達給伺服器。

React之元件巢狀

在React元件中，父元件向子元件通訊，是通過屬性的方法，而子元件向父元件通訊，則是使用間接委託的方式。例如，在子元件中觸發一個方法，通過呼叫父元件中對應的函式，來與父元件進行通訊：

React多元件巢狀

React 推薦以元件的方式去重新思考 UI 構成，將 UI 上每一個功能相對獨立的模組定義成元件，然後將小的元件通過組合或者巢狀的方式構成大的元件，最終完成整體 UI 的構建。下面是一個簡單的元件

react入門筆記四 (元件巢狀)

經過前面的那些學習,我們現在已經瞭解了元件化的思想,現在讓我們來開始元件化的開發吧例如我們現在實現這樣一個頁面 1.有一個p標籤,表示跳轉到的網站名 2.有一個a標籤可以跳轉 3.用一個div將上面的兩個元件容納進去這個很簡單實現,一個父div,裡面裝一個p,一個a標籤就完事

React之元件化

image.png 一、說一下對元件化的理解 1.1 元件的封裝檢視資料變化邏輯 image.png 1.2 元件的複用 props 傳遞複用 image.png image.png 二、JSX

pyhon學習之selenium巢狀定位frame

首先我們看一看方法 def switch_to_frame(self, frame_reference): """ Deprecated use driver.switch_to.frame """ warnings.warn("use d

pyhon學習之selenium巢狀定位元素

我們通過 driver.get_element_by_id("")獲取到了元素之後，檢視這個類中擁有的方法。 ['__class__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge

控制元件巢狀中的QT滑鼠事件處理機制

想實現在層層佈局的控制元件中，對最外層的QLabel上的滑鼠事件實現tracking，即觸發mouseMoveEvent的時候，不需要一直按著前提：自定義控制元件，繼承QLabel重寫滑鼠事件相應的方法可參考：https://wiki.qt.io/Clickable_QLabel

java:集合框架(集合巢狀之ArrayList巢狀ArrayList)

import java.util.ArrayList; import com.heima.bean.person; /*案列演示：學科一個大集合一個學科裡面若干個班級（一個班級是一個小集合）*/

Json檔案轉Map(三)之獲取巢狀Map值

說明在上一章節的部落格中，我們已經學習瞭如何解析巢狀的Json,將獲取巢狀Json的節點。那麼在這一章節中，如何通過以下的節點格式去取值。 index8=results>index>index7> index7=results>index>

react-router4中巢狀路由的寫法

因為本人也是react的初學者，也是在一遍摸索著一邊解決一些小的問題來分享出來，希望大家能共同交流。接下來談一談react-router4中如何寫巢狀路由。因為在前幾篇部落格裡寫了用react-router實現單頁面跳轉，但是沒有測試巢狀路由，導致巢狀的部分無法實現正常跳轉，現已改正，並來說一

多級元件巢狀傳遞資料，$attrs和inheritAttrs用法

我們在vue的父子元件傳值的時候，我們先在需要的子元件上用props註冊一些屬性，然後父元件呼叫的時候當屬性來傳值。如果我們給child傳props沒有註冊的屬性，我們就要用$attrs來取了。現有父元件A和子元件B: 元件A的內容如下： <template>

NestedScrollView 之 ScrollView 巢狀 ListView

【問題彙總】ScrollView巢狀ListView的問題 Anroid Studio 新建一個工程之後，預設繼承AppCompatActivity， MainActivity 佈局如下 main.layout <

angularJs模組ui-router之狀態巢狀和檢視巢狀

狀態巢狀的方法狀態可以相互巢狀。有三個巢狀的方法：使用“點標記法”，例如：.state('contacts.list', {})使用parent屬性，指定一個父狀態的名稱字串，例如：parent: 'contacts'使用parent屬性，指定一個父狀態物件，例如

vue元件巢狀迴圈報錯 provide name option

問題原因：巢狀的元件沒有例項化完成解決方法：在專案初始化也就是在main.js中引入該元件 main.js import Vue from 'vue'; import Element from url; Vue.component('elementName', Element);

Android 混排效果之 ScrollView 巢狀 RecyclerView 巢狀gridview 實現listview 巢狀gridview 效果

RecyclerView 出現以後很受大家歡迎漂亮流暢的列表簡單的操作可以幫我們完成很多的列表但是有一種listview 巢狀gridview 的效果目前還是需要巢狀才能完成現在就簡單說一下我的思路本人的需求是例如手機淘寶頁本人使用老套的實現模

之三巢狀路由

巢狀路由，即路由中巢狀路由。下面的例子，舉例商品列表頁面中，通過一個路由檢視商品的標題，再通過一個路由檢視商品的圖片。我們先定義兩個元件，Title.vue , Image.vue。下面是Title.vue <template> <div>

Vue 爬坑之旅--巢狀路由預設選中第一個子路由，並且主路由和子路由都處於啟用狀態

在實際開發中，巢狀路由經常會用到，基本用法也很簡單，今天要說的不是巢狀路由怎麼用，而是在用的過程中發現的二點小細節的處理。巢狀路由中預設選中第一個子路由在一個這樣的介面中，底部的五個 tab 顯然應該是五個路由，現在在首頁這個路由下面又有三個 tab

HTML5學習之五巢狀列表、自定義列表

<ul> <li>寵物</li> <ul> <li>貓</li

Vue 測試例項-元件巢狀二種方式

</div>', props: { data:Object } }); // 方式一：巢狀元件時用<slot></slot>, Vue.component("Itemlist1", { template: '<di

Listview和其他滑動控制元件巢狀使用的坑

RecyclerView和ListView 異同比較：相同點：都可以實現垂直方向的滾動列表效果；都需要使用介面卡（Adapter）不同點：ListView只能實現垂直滾動列表，但RecyclerView還可以實現水平、多列、跨列等複雜的滾動列表；RecyclerView不但需要Adapter，還必須有L

React之元件巢狀

相關推薦