どのように反応してフィルタリングポートフォリオを作成します.js

過去には、Webアプリケーションを制御するのは簡単ではなかった、単純な機能をしたい場合は、多くのコードが必要でしたが、今の技術の進歩では、これらの機能を簡単になっている.
それで、私は、反応を使用しているカテゴリーによって濾過可能なポートフォリオを作る最も簡単な方法で、今日来ています.js

まず、インストールする必要がありますcreate-react-app

npx create-react-app my-app
cd my-app
npm start

これで反応アプリを作成しました:)

次のステップは、portfolio.js インsrc/portfolio/portfolio.jsで設定し、App.js ファイル

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Portfolio from "./pages/Portfolio/Portfolio";

function App() {

  return ( 
    <div className="Main">

      <Router>
        <Switch>
          <Route path="/portfolio" exact component={Portfolio} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

今、私たちは空のファイルをportfolio.js コンポーネントの作成

import React, { Component } from "react";

class Portfolio extends Component {
    render() {
        return (
            <div>Portfolio Page</div>
        )
    }
}

export default Portfolio;

我々はポートフォリオを制御するために国家を創設する必要がある

すべてのポートフォリオアイテムを含む

ポートフォリオ:ポートフォリオの現在の状態を含む

カテゴリー:我々のカテゴリーを含みます

SelectedCategory :選択したカテゴリを含む

import React, { Component } from "react";

class Portfolio extends Component {
    state = {
        getAllPortfolio: [
            {
                id: 1,
                name: "Project 1",
                category: "Devices"
            },
            {
                id: 2,
                name: "Project 2",
                category: "Accessories"
            },
            {
                id: 3,
                name: "Project 3",
                category: "Devices"
            },
            {
                id: 4,
                name: "Project 4",
                category: "Tools"
            },
            {
                id: 5,
                name: "Project 5",
                category: "Fruits"
            },
        ],
        portfolio: [],

        categories: ["All", "Devices", "Accessories", "Tools", "Fruits", "Shoes"],
        selectedCategory: "All",
    };
    render() {
        return (
            <div>Portfolio Page</div>
        )
    }
}

export default Portfolio;

今、我々はこれらの状態を一緒に作業し、行動を実行する時、我々は機能を書く予定ですfilterItems()

filterItems = (e, category) => {
    e.preventDefault();

    if (category === "All") {
      this.setState({
        selectedCategory: category,
        portfolio: this.state.getAllPortfolio,
      });
    } else {
      this.setState({
        selectedCategory: category,
        portfolio: this.state.getAllPortfolio.filter(
          (item) => item.category === category
        ),
      });
    }
  };

では、私たちの要素をDOMに

render() {
        const portfolioItems = this.state.portfolio.map((item) => (
            <div className="work" key={item.id}>
                <h3>{item.name}</h3>
                <span>{item.category}</span>
            </div>
        ));

        const categoriesList = this.state.categories.map((cat) => (
            <a
                href="#"
                className={cat === this.state.selectedCat ? "active" : ""}
                onClick={(e) => this.filterItems(e, cat)}
            >
                {cat}
            </a>
        ));

        return (
            <div className="Portfolio">
                <div className="all-content">
                    <section>
                        <h3>Portfolio</h3>
                        <div className="categories">{categoriesList}</div>
                    </section>
                    <div className="works">
                        <div className="row">{portfolioItems}</div>
                    </div>
                </div>
            </div>
        );
    }

閉じるこの動画はお気に入りから削除されています
あなたは私の上に従うことができます.Behance , Dribbble , GitHub