26_练习2_用户搜索_初始化显示(静态页面)

项目结构：

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_用户搜索_初始化显示(静态页面)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。