項目結構：

import React, {Component} from 'react'import Search from './search' import Main from './main'export default class App extends Component {render() {return (<div className="container"><Search/><Main/></div> )} } app.jsx import React, {Component} from 'react'export default class Main extends Component {state = {initView: true,//搜索之前loading: false,//搜索中users: null,//搜索成功errorMsg: null//搜索失敗 }render() {const {initView, loading, users, errorMsg} = this.stateif (initView) {return <h2>請輸入關鍵字進行搜索</h2>} else if (loading) {return <h2>正在請求中......</h2>} else if (errorMsg) {return <h2>{errorMsg}</h2>} else {return (<div className="row">{ //箭頭兩個作用 1.函數 2.返回users.map((user, index) => (<div className="card"><a href={user.url} target="_blank"><img src={user.avatarUrl}style={{width: 100}}/></a><p className="card-text">{user.name}</p></div> ))}</div> )}} } main.jsx import React, {Component} from 'react'export default class Search extends Component {render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/><button>Search</button></div></section> )} } search.jsx .album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7; }.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center; }.card > img {margin-bottom: .75rem;border-radius: 100px; }.card-text {font-size: 85%; } index.css import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app'; import './index.css';ReactDOM.render(<App/>, document.getElementById('root')); index.js

?

轉載于:https://www.cnblogs.com/zhanzhuang/p/10728016.html

總結

以上是生活随笔為你收集整理的26_练习2_用户搜索_初始化显示(静态页面)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。