【全棧React】第5天: 數據驅動

inapt 發布于2019-08-20 18:29 / 2993人閱讀

摘要：今天，我們將把我們的組件設置為由數據驅動，訪問外部數據。介紹屬性允許我們以與相同的語法向組件發送數據，使用組件上的特性或屬性。我們將我們的活動項目移動到我們將針對每個項目運行的項目中。本周，我們使用概念更新了由數據驅動的組件。

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

我們的應用程序中的硬編碼數據不是好主意。今天，我們將把我們的組件設置為由數據驅動，訪問外部數據。

通過這一點，我們已經編寫了我們的第一個組件并將其設置為子/父關系。但是，我們還沒有將任何數據綁定到我們的React組件。雖然在React中寫一個網站是一個更愉快的體驗（在我們看來），我們還沒有利用React的力量來顯示任何動態數據。

今天我們來改一下。

數據驅動

回想一下，昨天我們構建了包含頭和活動列表的時間軸組件的開始：

我們將演示分解成組件，最終用靜態JSX模板構建了三個獨立的組件。每當我們改變網站的數據時，不得不更新我們組件的模板是不方便的。

而是讓我們給出要使用的組件數據進行顯示。我們從

組件開始吧。現在，

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

讓我們告訴React，我們希望能夠將標題設置為別的東西。

介紹屬性

React允許我們以與HTML相同的語法向組件發送數據，使用組件上的特性或屬性。這類似于將 src 屬性傳遞給圖像標簽。我們可以考慮標簽的屬性，因為prop我們正在設置調用的組件img。

我們可以訪問組件內的這些屬性 this.props。讓我們看看在動作中使用 props。

回想一下，我們將

組件定義為：

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

        
          {this.props.title}
        

        

        
      
    )
  }
}

當我們使用該

組件時，我們將它放在我們的組件中：

我們可以 title 作為一個屬性傳遞我們作為一個屬性，

通過更新組件的使用設置調用 title 某個字符串的屬性，如下所示：

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

import React from "react"

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

        
          {this.props.title}
        

        

        
      
    )
  }
}

export default Header

現在我們的

組件將顯示我們傳入的字符串，title 當我們調用該組件時。例如，

像這樣調用我們的組件四次：

結果四個

組件加載完成后如下：

很漂亮，是嗎？現在我們可以復用

組件, 使用一個動態 title 屬性。

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

我們來看內容組件，并用數據變量而不是而不是靜態設置內容和日期。就像我們可以使用HTML組件一樣，我們可以將多個 props 組件傳遞給組件。

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

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

      {/* Timeline item */}
        
          
            
            Doug
          

          
            An hour ago
          
          Ate lunch
          
            2
          
        

        {/* ... */}

      
    )
  }
}

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

用戶的頭像圖片

活動的時間戳

活動項的文字

評論數量

假設我們有一個代表活動項目的JavaScript對象。我們將有一些字段，如字符串字段（文本）和日期對象。我們可能會有一些嵌套的對象 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!" }
  ]
}

就像我們將一個字符串標題傳遞給

組件一樣，我們可以把這個 activity 對象傳遞給 Content 組件。我們轉換我們的組件來顯示它的模板內的這個活動的細節。

為了將動態變量的值傳遞給一個模板，我們必須使用模板語法在我們的模板中呈現。例如：

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

我們在我們的類定義中使用了一點ES6，在第一行定義就是這個render() 的解構函數。以下兩行在功能上相當：

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

解構使我們能夠以更短，更緊湊的方式節省打字和定義變量。

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

太棒了，現在我們有一個由一個對象驅動的活動項。但是，您可能已經注意到，我們將不得不使用不同的注釋實現這個多次。相反，我們可以將一組對象傳遞到組件中。

假設我們有一個包含多個活動項目的對象：

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" }]
  },
]

我們可以通過傳遞多個活動來重新闡述我們的使用，而不僅僅是一個：

但是，如果我們刷新視圖什么都不會出現！我們需要先更新我們的 Content 組件以接受多個活動。正如我們以前了解到的，JSX真的只是由瀏覽器執行的JavaScript。我們可以在JSX內容中執行JavaScript函數，因為它將像瀏覽器的JavaScript一樣運行。

我們將我們的活動項目 JSX 移動 map 到我們將針對每個項目運行的項目中。

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

現在我們可以將任何數量的活動傳遞給我們的數組，Content 組件將處理它，但是如果我們現在離開組件，那么我們將有一個相對復雜的組件處理，包含和顯示活動列表。像這樣離開真的不是React的方式。

活動項

這里寫一個組件包含顯示單個活動項然后再建立一個復雜的 Content 組件是有意義的，我們可以移動責任。這也將使測試更容易，添加功能等

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

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

這不僅僅是簡單易懂，而且使得這兩個組件的測試更容易。

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

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 概念更新了由數據驅動的組件。在下一節中，我們將介紹有狀態的組件。

GPU云服務器云服務器數值分析第5版第5代html下載 javascript入門經典第5版第7天:CSS入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84589.html

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

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第3天: 我們的第一個組件

摘要：我們的應用由一個單一的元素組成。讓我們通過構建我們的第一個組件來開始接觸這個力量。我們將把組件寫成類。讓我們來看一個我們要調用的組件。然而，什么都不會在屏幕上呈現。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3799原文：https://www.fullstackreact.com/30-days-of-react/day-...

KaltZK 2019-08-20 18:29 評論0 收藏0
【全棧React】第30天: 總結和更多的資源

摘要：本文轉載自眾成翻譯譯者鏈接原文我們做到了第天。歡迎來到最后一天恭喜你做到了我們此行的最后一個部分是通過參與。反應社區是活躍成長和友好的。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我們做到了！第30天...

Miracle_lihb 2019-08-21 11:52 評論0 收藏0
【全棧React】第4天: 復雜組件

摘要：本文轉載自眾成翻譯譯者鏈接原文太棒了，我們已經構建了第一個組件。天前一章節，我們開始構建我們的第一個組件。內容部分內有個不同的項目組件。決定劃分組件的深度比科學更顯得藝術。子組件當組件嵌套在另一個組件中時，它被稱為子組件。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

Mike617 2019-08-20 18:29 評論0 收藏0
【全棧React】第6天: 狀態

摘要：無論何時狀態改變通過，組件將重新投遞。在調用函數之后，我們可以將第二個參數傳遞給函數，該函數將在狀態更新后保證被調用。今天，我們更新了我們的組件以使其處于狀態狀態，現在有必要處理如何使組件成為狀態。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...

leo108 2019-08-20 18:29 評論0 收藏0