資訊專(zhuān)欄INFORMATION COLUMN
摘要：父子組件通訊通訊手段這是最常見(jiàn)的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過(guò)來(lái)使用。
父子組件通訊
通訊手段
這是最常見(jiàn)的通信方式，父組件只需要將子組件需要的props傳給子組件，子組件直接通過(guò)this.props來(lái)使用。
通訊內(nèi)容
更多要提的是如何合理的設(shè)置子組件的props，要想將子組件設(shè)計(jì)成一個(gè)復(fù)用性強(qiáng)的通用組件，需要將能夠復(fù)用的部分抽象出來(lái)，抽象出來(lái)的props有兩種形成，一種是簡(jiǎn)單的變量，另一種是抽象出來(lái)處理某種邏輯函數(shù)。
以Header 組件為例
//HeaderBar.jsx 子組件
import React, { Component } from "react";
class Header extends Component {
constructor() {
super();
this.handleClick = (e) => {
console.log(this)
}
}
renderLeftComponent() {
let leftDOM = {};
if (this.props.renderLeftComponent) {
return this.props.renderLeftComponent();
}
if (this.props.showBack) {
let backFunc = this.props.onBack || this.goBack;
leftDOM = ();
}
return leftDOM;
}
renderRightComponent() {
if (this.props.renderRightComponent) {
return this.props.renderRightComponent();
}
}
goBack() {
alert("返回上一頁(yè)")
}
render() {
return (
{this.renderLeftComponent()}
{this.props.title || "滴滴"}
{this.renderRightComponent()}
);
}
}
export default Header;
//父親組件部分代碼App.jsx
import HeaderBar from "./components/Header";
let leftIcon = function () {
return (
左邊按鈕
)
}
class App extends Component {
render() {
return (
子父組件通訊
父-子組件通信的手段是通過(guò)子組件的props是子組件用父組件的東西，子-父組件通信，是父組件用子組件的東西，暫時(shí)了解的兩種方法
利用回調(diào)函數(shù)父組件通過(guò)props傳遞一個(gè)方法給子組件，子組件通過(guò)props方法將子組件數(shù)據(jù)傳遞給父組件
利用ref父組件通過(guò)refs調(diào)用子組件的屬性
跨級(jí)組件通信在React中當(dāng)一個(gè)屬性反復(fù)使用并且存在與好幾個(gè)子組件中的時(shí)候，這個(gè)時(shí)候我們?nèi)绻ㄟ^(guò)props一級(jí)一級(jí)傳遞的話可以實(shí)現(xiàn)多層級(jí)訪問(wèn)，但是這樣出現(xiàn)一個(gè)問(wèn)題就是會(huì)使代碼非?；靵y，在React中國(guó)年，我們還可以使用 context 來(lái)實(shí)現(xiàn)跨級(jí)父子組件間的通信；
在react中context稱(chēng)為蟲(chóng)洞
// Component 父級(jí)
class parentComponent extends React.Component {
// add the following property
static childContextTypes = {
color: React.PropTypes.string
}
// 添加下面方法
getChildContext() {
return {
color: "#f00"
}
}
render() {
同級(jí)組件通信
同級(jí)組件之間的通信還是需要通過(guò)父組件作為中介，利用多次父-子組件通信，項(xiàng)目中將需要傳遞的數(shù)據(jù)放在了父組件的state中，變動(dòng)時(shí)可以自動(dòng)的同步傳遞。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87200.html
摘要：案例代碼定義計(jì)算規(guī)則，即個(gè)商品價(jià)值戀人結(jié)算完成，當(dāng)前購(gòu)物車(chē)為空單身狗根據(jù)計(jì)算規(guī)則生成定義數(shù)據(jù)即變化之后的派發(fā)規(guī)則觸發(fā)數(shù)據(jù)變化上一篇開(kāi)發(fā)教程八組件通信下一篇開(kāi)發(fā)教程十結(jié)合 Readux基礎(chǔ) 什么是redux？ 簡(jiǎn)單點(diǎn)回答就是，一個(gè)管理數(shù)據(jù)的全局對(duì)象，但是它有單一狀態(tài)樹(shù)的概念，所謂的單一狀態(tài)樹(shù)，就是指所有的 state都以一個(gè)對(duì)象樹(shù)的形式儲(chǔ)存在一個(gè)單一的 store 中。 頁(yè)面中的所有狀...
摘要：然而，盡管使用有諸多好處，但邁出第一步可能并不容易。為了簡(jiǎn)化初始教程，我們今天只構(gòu)建一個(gè)簡(jiǎn)單的列表視圖。是我們將在本教程系列中使用的客戶(hù)端的名稱(chēng)。我們將列表組件命名為。在本教程的其余部分中，你將了解到我們構(gòu)建一個(gè)真正的通信應(yīng)用的基礎(chǔ)。 首發(fā)于眾成翻譯 Part 1——前端：使用 Apollo 聲明式地請(qǐng)求和 mock 數(shù)據(jù) showImg(http://p0.qhimg.com/t0...
摘要：它是官方維護(hù)的，事實(shí)上也是唯一可選的路由庫(kù)。表示的這個(gè)部分是可選的。另一種做法是，使用指定當(dāng)前路由的。而組件會(huì)使用路徑的精確匹配。否則用戶(hù)直接向服務(wù)器請(qǐng)求某個(gè)子路由，會(huì)顯示網(wǎng)頁(yè)找不到的錯(cuò)誤。 真正學(xué)會(huì) React 是一個(gè)漫長(zhǎng)的過(guò)程。 你會(huì)發(fā)現(xiàn)，它不是一個(gè)庫(kù)，也不是一個(gè)框架，而是一個(gè)龐大的體系。想要發(fā)揮它的威力，整個(gè)技術(shù)棧都要配合它改造。你要學(xué)習(xí)一整套解決方案，從后端到前端，都是全新的做...
閱讀 2248·2021-11-18 10:02
閱讀 3499·2021-11-15 11:36
閱讀 1125·2019-08-30 14:03
閱讀 742·2019-08-30 11:08
閱讀 2772·2019-08-29 13:20
閱讀 3295·2019-08-29 12:34
閱讀 1382·2019-08-28 18:30
閱讀 1648·2019-08-26 13:34
