React|ラフィスタリ工場コメント

20555 ワード
React scss テキストリンク

ラファスタコメント



上記コードの最初の項目では,React-Class ComponentとWebFirstのみで作成した項目をReact-Fancial ComponentとWebFirst,移動Firstの反応型に再パッケージする.
プロジェクト-GitHub
アイテム→リンク

覚えて符号化したい


useEffectからuseCallbackを模倣します。


プロジェクトでは、画面サイズが変化するたびにresizeイベントが適用され、ブラウザの画面サイズが変化するたびに、フローするスライドが作成されます.このプロセスでは、ブラウザがサイズを変更するたびに(レンダリング)
関数を再生成する必要がないため,useCallbackを用いたが,初回接触者に直接接触できない可能性があるため,以下の方法をまとめた.
// Products.jsx
  useEffect(() => {
    const onWindowSize = () => {
      setInnerWidth(window.innerWidth);
    };
    window.addEventListener('resize', onWindowSize);

    return () => {
      window.addEventListener('remove', onWindowSize);
    };
  }, []);

childrenを使用して、再使用可能なスライドコンポーネントを作成します。


子供のレイアウトが親のレイアウトと同じで、子供のレイアウトだけを変えると便利です.プロジェクトのホームページでは、スライドの上下に1枚ずつ大きさの異なるスライドがあり、childrenを使用して、スライドの大きなレイアウトをそのままにして、ボタンを押すだけで中の画像を変えることができます.これは非常に役に立ちます.
import React, { useState, useEffect } from 'react';
import Button from '../Button/Button';
import './Slide.scss';

function Slide({ title, list, name, children, onSlide }) {
  const [slideBg, setSlideBg] = useState('');
  const [slideCount, setSlideCount] = useState(1);

  const handleNextClick = () => {
    if (slideCount < list.length) {
      setSlideCount(prev => prev + 1);
      onSlide('next', slideCount);
    }
  };
  const hadlePrevClick = () => {
    if (slideCount > 1) {
      setSlideCount(prev => prev - 1);
      onSlide('prev', slideCount);
    }
  };
  
  useEffect(() => {
    let slideItem = list.find(item => item.id === slideCount);
    setSlideBg(slideItem && slideItem.background);

  }, [list, slideCount]);

  if (list.length === 0) {
    return null;
  }

  return (
    <section className="slide" style={{ background: slideBg }}>
      <div className={`slide-wrapper__${name}`}>
        <h3 className={`slide-title__${name}`}>{title}</h3>
        <ol className={`slide-count__list-${name}`}>
          <li>
            <Button
              className="button--prev"
              disabled={slideCount === 1}
              onClick={hadlePrevClick}
            >
              <i className="fas fa-chevron-left" />
            </Button>
          </li>
          <li className="start-count">
            <span>{slideCount}</span>
          </li>
          <li className="center">
            <span>/</span>
          </li>
          <li className="end-count">
            <span>{list.length}</span>
          </li>
          <li>
            <Button
              className="button--next"
              onClick={handleNextClick}
              disabled={slideCount === list.length}
            >
              <i className="fas fa-chevron-right" />
            </Button>
          </li>
        </ol>
      </div>
      {children}
    </section>
  );
}
audiostreamer.m
Formクラスの利用