一個 React 簡單應用的例子:通過 API 獲取 GitHub 用戶信息
這是一個非常簡單的例子,展示了一個表單接受GitHub用戶名稱,一旦接收到submit事件,它將向 GitHub API 請求該用戶的信息並打印。 這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時,這個名稱被綁定到它的狀態中。 當按下Add card時,清除Form組件的userName狀態,以清除輸入表單。 除了 React,該示例還使用了Axios庫。這是一個很好的輕量級庫,用於處理網絡請求。可在 CodePen 中的設置中添加它,或者使用npm install axios在本地安裝它。 輸出: 代碼: 首先創建 Card 組件,這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據,使用: props.avatar_url 用戶頭像 props.name 用戶名稱 props.blog 用戶個人網站的URL const Card = props => { return ( <div style={{ margin: '1em' }}> <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} /> <div> <div style={{ fontWeight: 'bold' }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) } 我們創建了一個 Card 組件的列表,它將作為父組件中的 cards 屬性傳遞給 CardList ,使用 map() 函數遍歷它並輸出一個卡片列表: const CardList = props => ( <div> {props....