反応:' emptystate 'コンポーネントを作成する


空の状態と値は常にチェックされます.配列がundefinedまたはnullの場合、エラーが発生します.データがなければ、メッセージがなければなりません.
私はこれらの基本的な使用ケースをカバーするこのEmptyStateコンポーネントを作った.
/** EmptyState.js */
import React from "react";
import _ from "lodash";
import styled from "styled-components";

const StyledContainer = styled.div`
  text-align: center;
  width: 100%;
  font-size: 2rem;
  color: lightgrey;
`;

const EmptyState = ({ input, children }) => {
  // matches falsy values as well as empty arrays & objects
  const isEmpty = _.isEmpty(input);

  return isEmpty ? <StyledContainer>Empty</StyledContainer> : children;
};

export default EmptyState;
使用法:
/** App.js */
import React from "react";
import EmptyState from "./EmptyState";

const App = ({ data }) => {
  return (
    <EmptyState input={data}>
      {data.map((name) => (
        <h3>{name}</h3>
      ))}
    </EmptyState>
  );
};

export default App;
あなたが考えることができるどんな追加をコメントしてください.
読書ありがとう💙
@ codedropに続いてください.より多くのための技術
● ● Facebook
マイクロラーニング● Web開発● ジャバスクリプト● メルンスタック
codedrops.tech
プロジェクト
ファイルとの間の簡単なタグ/別名ファイルと速いスイッチへの対