2022/01/15

25098 ワード
テキストリンク
今日やったこと
環境変数の使用
リファレンス
[正式ドキュメント]基本プロパティ:環境変数|次へ。js
  • dotenvパッケージをインストールする必要はありません.
  • .env、.env.local、.env.productionなどのファイル名は、環境変数を作成します.
  • ブラウザで宣言された環境変数を使用する場合は、NEXT_PUBLIC_という名前のprefixを追加できます.
    • ドロップダウン構成部品ツリーファクトリ
    カスタマイズSelect、Optionラベルコンポーネント化およびstate type変更
    既存のitemstateタイプはHTML Elementなので、属性としてdangerouslysetInnerHTML...構成部品の初期レンダリングでdefaultValue値を追加する必要があるため、ドロップダウン構成部品リストのdiv要素は使用できません.
    したがって、itemstateはタイプをitemList配列のオブジェクトに変更しました.
  • CustomOptionシンボルをアイコン画像のあるタイプとアイコン画像のないタイプに分けます.
    • // Dropdown.tsx
const OptionItemWithImage = (props: any) => {
    const { el } = props;
    return (
      <div
        id="item"
        data-id={el.id}
        className="item with-icon"
        onClick={onSelectItem}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <div style={{ display: 'flex' }} data-id={el.id}>
          <img
            src={el.img}
            id="item_name"
            width={18}
            height={18}
            style={{ marginRight: '0.5rem' }}
          />
          <span id="item_name">{el.name}</span>
        </div>
        <img
          src="/svg/check_select.svg"
          ref={selectedMark}
          width={15}
          height={10.5}
          style={{ display: 'none' }}
          className="selected_mark"
        />
      </div>
    );
  };

  const OptionItem = (props: any) => {
    const { el } = props;
    return (
      <div data-id={el.id} className="item" onClick={onSelectItem} id="item">
        <span id="item_name">{el.name}</span>
        <img
          src="/svg/check_select.svg"
          className="selected_mark"
          ref={selectedMark}
          width={15}
          height={10.5}
          id="item_name"
          style={{ display: 'none' }}
        />
      </div>
    );
  };
  • defaultValueは親コンポーネントからpropsに渡されます.
    • const CoinInfo = ()=> {
  return (
    <>
      ...
      <Dropdown
              onChange={handleMarket}
              itemList={MarketList.slice(0, 3)}
              placeholder="거래소 선택"
              defaultValue={MarketList.slice(0, 3)[0]} />
      ...
   </>
  )
}
  • 構成部品を初めてレンダリングするときにSelectが選択されている場合は、選択された情報のステータスがuseEffectに変更されます.
    • /* Dropdown.tsx */
const Dropdown = ({ itemList, placeholder, onChange, defaultValue }: Props) => {
  /* 드랍다운 열린 상태/닫힌 상태 (true/false) */
  const [isActive, setIsActive] = useState<boolean>(false);
  const [item, setItem] = useState<any>(null);
  const onActiveToggle = useCallback(() => {
    setIsActive((prev) => !prev);
  }, []);
  
  useEffect(() => {
    if (defaultValue) {
      setItem(defaultValue);
    }
  }, []);

  
  const onSelectItem = useCallback((e) => {
    const targetId = e.target.id;

    if (targetId === 'item_name') {
      const value = e.target.parentElement.dataset.id;
      setItem(itemList.filter((el) => el.id === value)[0]);
      onChange(value);
    } else if (targetId === 'item') {
      const value = e.target.dataset.id;
      setItem(itemList.filter((el) => el.id === value)[0]);
      onChange(value);
    }
    setIsActive((prev) => !prev);
  }, []);
    PagerTabStrip選択/選択されていないtabフォントの色を変更
    Javaの修正方法.入出力Javaで壊れたパイプ( Warly fly 10.1 )