React學習筆記六：列表渲染

阿新 • • 發佈：2021-01-22

<!DOCTYPE html>
<html lang=">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react 學習</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js" 
></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div 
 id="app"></div>
    <script type="text/babel">
      class App extends React.Component {
        state = {
          list: [{
            id: 1,
            name: "小米",
            height: 133
          },
          {
            id: 2,
            name: "小紅" 
,
            height: 131
          },
          {
            id: 3,
            name: "小張",
            height: 136
          }]
        }

        render(){
          const Lis = this.state.list.map(item=>{
            return <li key={item.id}>姓名：{item.name}，身高：{item.height}</li>
          })
          return <ul>
            {Lis}
            </ul>
        }
      }
      
      ReactDOM.render(
        <App />,
        document.getElementById("app")
      );
    </script>
  </body>
</html>

React學習筆記六：列表渲染

<!DOCTYPE html> <html lang="> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /

python學習筆記17：列表list

目錄1. 常用操作2. 列表生成式3. 生成器3.1. 使用類似列表生成式的for迴圈實現generator3.2. 使用函式實現generator: yield4. 迭代器

Java IO學習筆記六：NIO到多路複用

作者：Grey 原文地址：Java IO學習筆記六：NIO到多路複用雖然NIO效能上比BIO要好，參考：Java IO學習筆記五：BIO到NIO

React學習筆記(六) bindActionCreators

bindActionCreators是redux的一個API，作用是將單個或多個ActionCreator轉化為dispatch(action)的函式集合形式。

Java學習筆記六：Java最基礎

1. 標誌符命名注意：只可以字母（A-Z或a-z）、美元符（$）、下劃線（_）開始；

React學習筆記 | 第六節：使用axios和fetch實現Ajax請求

技術標籤：React 本文是學習React筆記，對應視訊為：https://www.bilibili.com/video/BV1oW41157DY的 24 - 25 節。

React學習筆記(四)——列表和key

技術標籤：React 建立列表 React可以使用 JavaScript 的 map() 方法來建立列表，語法如下：

React學習筆記（二）：路由（react-router-dom ）

一、BrowserRouter型別入口檔案中（index.js） 1 import { BrowserRouter} from \'react-router-dom\'

PostgreSQL學習筆記6：LINK子句與LIMIT子句

LINK子句在PostgreSQL中，如果我們要獲取包含某些字元的資料時，就可以使用LINK子句。

《javascript設計模式》學習筆記一：Javascript面向物件程式設計物件成員的定義分析

本文例項講述了Javascript面向物件程式設計物件成員的定義。分享給大家供大家參考，具體如下：

《javascript設計模式》學習筆記二：Javascript面向物件程式設計繼承用法分析

本文例項講述了Javascript面向物件程式設計繼承用法。分享給大家供大家參考，具體如下：

《javascript設計模式》學習筆記四：Javascript面向物件程式設計鏈式呼叫例項分析

本文例項講述了Javascript面向物件程式設計鏈式呼叫。分享給大家供大家參考，具體如下：

《javascript設計模式》學習筆記三：Javascript面向物件程式設計單例模式原理與實現方法分析

本文例項講述了Javascript面向物件程式設計單例模式原理與實現方法。分享給大家供大家參考，具體如下：

《javascript設計模式》學習筆記五：Javascript面向物件程式設計工廠模式例項分析

本文例項講述了Javascript面向物件程式設計工廠模式。分享給大家供大家參考，具體如下：

《javascript設計模式》學習筆記七：Javascript面向物件程式設計組合模式詳解

本文例項講述了Javascript面向物件程式設計組合模式。分享給大家供大家參考，具體如下：

asp.net.core學習筆記1：swagger的使用和webapi接收Jobject物件

　　環境：asp.net.core 3.1 （一覺醒來官方已經不推薦3.0了，於是沒有任何core經驗，也只能開始了3.1的開發學習）

Spring AOP學習筆記04：AOP核心實現之建立代理

　　上文中，我們分析了對所有增強器的獲取以及獲取匹配的增強器，在本文中我們就來分析一下Spring AOP中另一部分核心邏輯--代理的建立。這部分邏輯的入口是在wrapIfNecessary()方法中緊接著增強器的獲取之後的creat

Spring AOP學習筆記05：AOP失效的罪因

　　前面的文章中我們介紹了Spring AOP的簡單使用，並從原始碼的角度學習了其底層的實現原理，有了這些基礎之後，本文來討論一下Spring AOP失效的問題，這個問題可能我們在平時工作中或多或少也會碰到。這個話題應該

python學習筆記19：集合set

目錄1. 特點：2. 常用操作 1. 特點： set和dict類似，是一組key的集合，但不儲存value；

學習筆記三：基礎篇Linux基礎

Linux基礎直接選擇排序>快速排序>基數排序>歸併排序 >堆排序>Shell排序>氣泡排序=氣泡排序2 =直接插入排序