node.js - 使用 reactstrap 制作更多卡片

问题描述

所以我几乎要结束我的个人项目，但我坚持的一件事是：我有一个关注系统，用户可以在其中看到他关注的所有其他用户（它正在工作）。我想以某种方式实现它，他在左边有一个 reactstrap 卡，有少量用户，还有一个显示更多按钮，它打开了其余的用户。这是我到目前为止得到的：屏幕：[！[在此处输入图像描述][1]][1]

这是呈现用户的代码（我之前从 get 方法中得到它）：

<div className="following">
    <Card body outline color="secondary" >
    <CardTitle className = "following-list"><following-list>Following list:</following-list></CardTitle>
          <CardBody>
          {following.length > 0 &&
            following.map(usr => {
              // return <p>{usr} </p>
              return <div>  
              <Button className = "button-follow" outline color="primary" onClick = {() =>seachUserHandler(usr)}>{usr}</Button>
              </div>
            })        
          }
          </CardBody>
          </Card>
        </div>

CSS 代码：

.following {
    position: absolute;
    background: whitesmoke; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    top:87px;
    left:2%;
    width:15%;


}

.button-follow{
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.following-list {
    color:#3a7bd5;
font-size: large;

}

onClick on which Button 只是将我引向关注的 usr 个人资料页面。我怎样才能以这样一种方式实现卡，用户一开始会看到 3-5 个用户，然后如果他点击“查看更多..”按钮，他会看到总列表？甚至可以用卡吗？

更新：对于任何想要使用下面这位伟人在解决方案中建议的技巧的人，这里是完整的工作代码：

import '../App.css';  
import { useHistory } from "react-router-dom";
import React , {useState, useEffect} from 'react';
import {Navbar,  NavbarBrand, Button, Input, Card,CardTitle, Col, CardBody} from 'reactstrap'
import { getUserPosts,search,getFollowingUsers,getFollowingUsersPosts } from '../fucntions/user_functions'

function Follow(){

let history = useHistory();
var email;
const [length, setLength] = useState(0)
const [following,setFollowing] = useState([])
const [userSearch, setUserSearch] = useState('')
const [followingPosts, setFollowingPosts] = useState([]);
const [showLess, setShowLess] = useState(false)

const [followingData, setFollowingData] = useState({
    isInitial: true,
    filteredList: following.slice(0,2),
    completeList: following,
  });


  const showMoreUsers = (_evt /*: SyntheticEvent<Event> */) => {
    setFollowingData({
      ...followingData,
      filteredList: following, 
      isInitial: false

    });
    setShowLess(true)
  }

  const showLessUsers = (_evt /*: SyntheticEvent<Event> */) => {
    setFollowingData({
      ...followingData,
      filteredList: following.slice(0,2),
      isInitial: true

    });
    setShowLess(false)
  }

  const moreUsersStyle = {
    color: 'rgba(0,0,0,0.5)',
    textDecoration: 'underline',
    marginTop: '10px'
  }

const handleSearchUser = e =>{setUserSearch(e.target.value);};

function handleBack(){
    history.goBack()
  }

function seachUserHandler(usr) {
    var tempPosts;
    let toSearch = null
    if (typeof(usr) == 'undefined'){
      toSearch = {
        email: userSearch
    }
   } else {
      toSearch = {
        email: usr
    }
  }
    search(toSearch).then(res =>{
      if (res.data.code.code !== 0){
        window.confirm(res.data.code.message)
      } else {
          const postsOfUser = {
            email: toSearch.email
          }
          tempPosts = postsOfUser 
          getUserPosts(tempPosts).then(response =>{
          localStorage.setItem('searchedUserPosts', JSON.stringify(response.data))
          localStorage.setItem('searchedUser', toSearch.email)
          localStorage.setItem('searchedUserName', res.data.user.first_name)
          var lengthOfPosts = res.data.user.posts.length
          localStorage.setItem('numPosts',lengthOfPosts)
          history.push('/profile')
        })
      }
    })
}

    function getFollowing(){
        const container ={
          email: email
        }
        getFollowingUsers(container).then(res =>{
          var data = res.data;
          setFollowing(data)
          setLength(data.length)
          getFollowingPosts(data)
          setFollowingData({
            ...followingData,
              filteredList: data.slice(0,2),
              completeList: following
          })
        })

      }

      function getFollowingPosts(data){
        const container ={
          data: data
        }
        getFollowingUsersPosts(container).then(res =>{
          var data = res.data;
          setFollowingPosts(data)
          console.log(data)

        })
      }

      useEffect(() =>{
        if (localStorage.getItem("usertoken") === null) {
            history.push('/errorPage')
        } else {
        const _email = localStorage.getItem('useremail')
        email = _email
        localStorage.removeItem('searchedUser') //used to delete the last profile searched
        localStorage.removeItem('searchedUserPosts') // used to delete the last profile searched post from cache
        getFollowing()


    };
},[]);

return (
    <div className="box">
      <div>
        <Navbar color="light" light expand="lg" className="justify-content-flex" style={{ padding: "5" }}>
          <div className="header-home">
            <NavbarBrand type="text">inTouch</NavbarBrand>
          </div>
          <div>
            <Col>
              <Input id="usr" name="user1" type="text" value={userSearch} placeholder="Enter user's email..." onChange={handleSearchUser}></Input>
            </Col>
          </div>
          <div>
            <Col>
              <Button outline color="primary" onClick={() => seachUserHandler()}>Search</Button>
            </Col>
          </div>
          <div>
            <Col>
              <NavbarBrand type="button" onClick={handleBack}>Back</NavbarBrand>
            </Col>
          </div>
        </Navbar>

        <div className="feed">
          <Card body outline color="secondary" >
          <CardTitle className = "following-list text-center"><following-list>Feed</following-list></CardTitle>
          <CardBody  className = "text-center">
          Welcome to your feed! Catch up with the people you follow.

          </CardBody>
          </Card>
        </div>
        <div className="following">
          <Card body outline color="secondary" >
          <CardTitle className = "following-list text-center"><following-list>Following list:</following-list></CardTitle>
          <CardBody className = "text-center">
          {followingData.filteredList.length > 0 &&
            followingData.filteredList.map(usr => 
              <div>  
                <Button className = "button-follow" 
                        outline 
                        color="primary" 
                        onClick = {() => seachUserHandler(usr)}>{usr}</Button>
              </div>
            )        

         }

         {followingData.isInitial ?
           <p onClick={showMoreUsers} style={moreUsersStyle}>Show all users...</p>
           : null
         }

         {showLess ?
          <p onClick={showLessUsers} style={moreUsersStyle}>Show less...</p>
          : null

         }

          </CardBody>
          </Card>
        </div>
        <div className="wrapper-all-posts">
        {length > 0 &&
            followingPosts.map(post => {
              return <Card body outline color="secondary" className="card-home " >
                <CardTitle>Posted at : {post.createdAt} By : {post.email}</CardTitle>
                <CardBody>{post.post}</CardBody>
              </Card>
            })
          }  
        </div>
      </div>
    </div>

  )
}

export default Follow;

标签： node.jsreactjs

node.js - 使用 reactstrap 制作更多卡片

问题描述

解决方案

推荐阅读