【全棧React】第5天: 數(shù)據(jù)驅(qū)動(dòng)

inapt 發(fā)布于2019-08-20 18:29 / 3002人閱讀

摘要：今天，我們將把我們的組件設(shè)置為由數(shù)據(jù)驅(qū)動(dòng)，訪問外部數(shù)據(jù)。介紹屬性允許我們以與相同的語法向組件發(fā)送數(shù)據(jù)，使用組件上的特性或?qū)傩?。我們將我們的活?dòng)項(xiàng)目移動(dòng)到我們將針對(duì)每個(gè)項(xiàng)目運(yùn)行的項(xiàng)目中。本周，我們使用概念更新了由數(shù)據(jù)驅(qū)動(dòng)的組件。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3821
原文：https://www.fullstackreact.com/30-days-of-react/day-5/

我們的應(yīng)用程序中的硬編碼數(shù)據(jù)不是好主意。今天，我們將把我們的組件設(shè)置為由數(shù)據(jù)驅(qū)動(dòng)，訪問外部數(shù)據(jù)。

通過這一點(diǎn)，我們已經(jīng)編寫了我們的第一個(gè)組件并將其設(shè)置為子/父關(guān)系。但是，我們還沒有將任何數(shù)據(jù)綁定到我們的React組件。雖然在React中寫一個(gè)網(wǎng)站是一個(gè)更愉快的體驗(yàn)（在我們看來），我們還沒有利用React的力量來顯示任何動(dòng)態(tài)數(shù)據(jù)。

今天我們來改一下。

數(shù)據(jù)驅(qū)動(dòng)

回想一下，昨天我們構(gòu)建了包含頭和活動(dòng)列表的時(shí)間軸組件的開始：

我們將演示分解成組件，最終用靜態(tài)JSX模板構(gòu)建了三個(gè)獨(dú)立的組件。每當(dāng)我們改變網(wǎng)站的數(shù)據(jù)時(shí)，不得不更新我們組件的模板是不方便的。

而是讓我們給出要使用的組件數(shù)據(jù)進(jìn)行顯示。我們從

組件開始吧?，F(xiàn)在，

組件只顯示元素的標(biāo)題 Timeline。這是一個(gè)很好的元素，它將是很好的能夠重用它在我們的頁面的其他部分，但標(biāo)題是 Timeline 沒有意義的每一次使用。

讓我們告訴React，我們希望能夠?qū)?biāo)題設(shè)置為別的東西。

介紹屬性

React允許我們以與HTML相同的語法向組件發(fā)送數(shù)據(jù)，使用組件上的特性或屬性。這類似于將 src 屬性傳遞給圖像標(biāo)簽。我們可以考慮標(biāo)簽的屬性，因?yàn)閜rop我們正在設(shè)置調(diào)用的組件img。

我們可以訪問組件內(nèi)的這些屬性 this.props。讓我們看看在動(dòng)作中使用 props。

回想一下，我們將

組件定義為：

class Header extends React.Component {
  render() {
    return (
      
        
          
          
          
        

        
          {this.props.title}
        

        

        
      
    )
  }
}

當(dāng)我們使用該

組件時(shí)，我們將它放在我們的組件中：

我們可以 title 作為一個(gè)屬性傳遞我們作為一個(gè)屬性，

通過更新組件的使用設(shè)置調(diào)用 title 某個(gè)字符串的屬性，如下所示：

在我們的組件內(nèi)部，我們可以 title 從課程中的 this.props 屬性訪問 Header。而不是像 Timeline 模板一樣靜態(tài)設(shè)置標(biāo)題，我們可以將其替換為傳入的屬性。

import React from "react"

class Header extends React.Component {
  render() {
    return (
      
        
          
          
          
        

        
          {this.props.title}
        

        

        
      
    )
  }
}

export default Header

現(xiàn)在我們的

組件將顯示我們傳入的字符串，title 當(dāng)我們調(diào)用該組件時(shí)。例如，

像這樣調(diào)用我們的組件四次：

結(jié)果四個(gè)

組件加載完成后如下：

很漂亮，是嗎？現(xiàn)在我們可以復(fù)用

組件, 使用一個(gè)動(dòng)態(tài) title 屬性。

我們可以傳遞不僅僅是組件中的字符串。我們可以傳遞數(shù)字，字符串，各種對(duì)象，甚至功能！我們將進(jìn)一步討論如何定義這些不同的屬性，以便稍后構(gòu)建組件api。

我們來看內(nèi)容組件，并用數(shù)據(jù)變量而不是而不是靜態(tài)設(shè)置內(nèi)容和日期。就像我們可以使用HTML組件一樣，我們可以將多個(gè) props 組件傳遞給組件。

回想一下，昨天我們定義了我們的 Content 容器，如下所示：

class Content extends React.Component {
  render() {
    return (
      
        

      {/* Timeline item */}
        
          
            
            Doug
          

          
            An hour ago
          
          Ate lunch
          
            2
          
        

        {/* ... */}

      
    )
  }
}

和我們 title 一樣，我們來看看 props 我們的 Content 組件需求：

用戶的頭像圖片

活動(dòng)的時(shí)間戳

活動(dòng)項(xiàng)的文字

評(píng)論數(shù)量

假設(shè)我們有一個(gè)代表活動(dòng)項(xiàng)目的JavaScript對(duì)象。我們將有一些字段，如字符串字段（文本）和日期對(duì)象。我們可能會(huì)有一些嵌套的對(duì)象 user 和 comments。例如：

{
  timestamp: new Date().getTime(),
  text: "Ate lunch",
  user: {
    id: 1,
    name: "Nate",
    avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
  },
  comments: [
    { from: "Ari", text: "Me too!" }
  ]
}

就像我們將一個(gè)字符串標(biāo)題傳遞給

組件一樣，我們可以把這個(gè) activity 對(duì)象傳遞給 Content 組件。我們轉(zhuǎn)換我們的組件來顯示它的模板內(nèi)的這個(gè)活動(dòng)的細(xì)節(jié)。

為了將動(dòng)態(tài)變量的值傳遞給一個(gè)模板，我們必須使用模板語法在我們的模板中呈現(xiàn)。例如：

import React from "react"

class Content extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        
          
            
            {activity.user.name}
          

          
            {activity.timestamp}
          
          {activity.text}
          
            {activity.comments.length}
          
        
      
    )
  }
}

export default Content

我們?cè)谖覀兊念惗x中使用了一點(diǎn)ES6，在第一行定義就是這個(gè)render() 的解構(gòu)函數(shù)。以下兩行在功能上相當(dāng)：

// these lines do the same thing
const activity = this.props.activity;
const {activity} = this.props;

解構(gòu)使我們能夠以更短，更緊湊的方式節(jié)省打字和定義變量。

然后，我們可以通過傳遞一個(gè)對(duì)象作為支持而不是硬編碼的字符串來_使用_這個(gè)新內(nèi)容。例如：

太棒了，現(xiàn)在我們有一個(gè)由一個(gè)對(duì)象驅(qū)動(dòng)的活動(dòng)項(xiàng)。但是，您可能已經(jīng)注意到，我們將不得不使用不同的注釋實(shí)現(xiàn)這個(gè)多次。相反，我們可以將一組對(duì)象傳遞到組件中。

假設(shè)我們有一個(gè)包含多個(gè)活動(dòng)項(xiàng)目的對(duì)象：

const activities = [
  {
    timestamp: new Date().getTime(),
    text: "Ate lunch",
    user: {
      id: 1, name: "Nate",
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: "Ari", text: "Me too!" }]
  },
  {
    timestamp: new Date().getTime(),
    text: "Woke up early for a beautiful run",
    user: {
      id: 2, name: "Ari",
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: "Nate", text: "I am so jealous" }]
  },
]

我們可以通過傳遞多個(gè)活動(dòng)來重新闡述我們的使用，而不僅僅是一個(gè)：

但是，如果我們刷新視圖什么都不會(huì)出現(xiàn)！我們需要先更新我們的 Content 組件以接受多個(gè)活動(dòng)。正如我們以前了解到的，JSX真的只是由瀏覽器執(zhí)行的JavaScript。我們可以在JSX內(nèi)容中執(zhí)行JavaScript函數(shù)，因?yàn)樗鼘⑾駷g覽器的JavaScript一樣運(yùn)行。

我們將我們的活動(dòng)項(xiàng)目 JSX 移動(dòng) map 到我們將針對(duì)每個(gè)項(xiàng)目運(yùn)行的項(xiàng)目中。

import React from "react"

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        {activities.map((activity) => {
          return (
            
              
                
                {activity.user.name}
              

              
                {activity.timestamp}
              
              {activity.text}
              
                {activity.comments.length}
              
            
          );
        })}

      
    )
  }
}

export default Content

現(xiàn)在我們可以將任何數(shù)量的活動(dòng)傳遞給我們的數(shù)組，Content 組件將處理它，但是如果我們現(xiàn)在離開組件，那么我們將有一個(gè)相對(duì)復(fù)雜的組件處理，包含和顯示活動(dòng)列表。像這樣離開真的不是React的方式。

活動(dòng)項(xiàng)

這里寫一個(gè)組件包含顯示單個(gè)活動(dòng)項(xiàng)然后再建立一個(gè)復(fù)雜的 Content 組件是有意義的，我們可以移動(dòng)責(zé)任。這也將使測(cè)試更容易，添加功能等

讓我們更新我們的 Content 組件以顯示組件列表 ActivityItem（我們將在下面創(chuàng)建）。

import React from "react"

import ActivityItem from "./ActivityItem";

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        {activities.map((activity) => (
          
        ))}

      
    )
  }
}

export default Content

這不僅僅是簡(jiǎn)單易懂，而且使得這兩個(gè)組件的測(cè)試更容易。

使用我們新鮮的 Content 組件，讓我們創(chuàng)建 ActivityItem 組件。由于我們已經(jīng)為此創(chuàng)建了視圖 ActivityItem，所以我們需要做的就是將它從我們 Content 組件的模板復(fù)制為自己的模塊。

import React from "react"

class ActivityItem extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      
        
          
          {activity.user.name}
        

        
          {activity.timestamp}
        
        {activity.text}
        
          {activity.comments.length}
        
      
    )
  }
}

export default ActivityItem

本周，我們使用React props 概念更新了由數(shù)據(jù)驅(qū)動(dòng)的組件。在下一節(jié)中，我們將介紹有狀態(tài)的組件。

GPU云服務(wù)器云服務(wù)器數(shù)值分析第5版第5代html下載 javascript入門經(jīng)典第5版第7天:CSS入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84589.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

inapt

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

flowstack

閱讀 2159·2023-04-26 00:38
ion(kryptcloud)：9月vps促銷，$120/年，2核/2G內(nèi)存/60gSSD/3T流量

閱讀 1943·2021-09-07 10:17
【和60】軟件即服務(wù)的三重境界

閱讀 897·2021-09-02 15:41
BlueHost ：美國(guó)VPS云主機(jī)2GB內(nèi)存2TB流量20GB固態(tài)硬盤月49元

閱讀 646·2021-08-30 09:45
瀏覽器緩存原理以及本地存儲(chǔ)

閱讀 552·2019-08-29 17:25
用JS添加某些CSS屬性導(dǎo)致:hover失效

閱讀 3220·2019-08-29 15:07
如何造一個(gè)『為移動(dòng)端而生』的日歷

閱讀 2199·2019-08-29 12:52
兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

閱讀 3742·2019-08-26 13:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【全棧React】第5天: 數(shù)據(jù)驅(qū)動(dòng)

相關(guān)文章

**【全棧React】React 30天教程索引**

**【全棧React】第3天: 我們的第一個(gè)組件**

**【全棧React】第30天: 總結(jié)和更多的資源**

**【全棧React】第4天: 復(fù)雜組件**

**【全棧React】第6天: 狀態(tài)**

發(fā)表評(píng)論

0條評(píng)論

inapt

男|高級(jí)講師

TA的文章

flowstack

ion(kryptcloud)：9月vps促銷，$120/年，2核/2G內(nèi)存/60gSSD/3T流量

【和60】軟件即服務(wù)的三重境界

BlueHost ：美國(guó)VPS云主機(jī)2GB內(nèi)存2TB流量20GB固態(tài)硬盤月49元

瀏覽器緩存原理以及本地存儲(chǔ)

用JS添加某些CSS屬性導(dǎo)致:hover失效

如何造一個(gè)『為移動(dòng)端而生』的日歷

兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

【全棧React】第5天: 數(shù)據(jù)驅(qū)動(dòng)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！