反応:' emptystate 'コンポーネントを作成する
4482 ワード
空の状態と値は常にチェックされます.配列が
私はこれらの基本的な使用ケースをカバーするこの
読書ありがとう💙
@ codedropに続いてください.より多くのための技術
● ● Facebook
マイクロラーニング● Web開発● ジャバスクリプト● メルンスタック
codedrops.tech
プロジェクト
ファイルとの間の簡単なタグ/別名ファイルと速いスイッチへの対
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に続いてください.より多くのための技術
マイクロラーニング● Web開発● ジャバスクリプト● メルンスタック
codedrops.tech
プロジェクト
ファイルとの間の簡単なタグ/別名ファイルと速いスイッチへの対
Reference
この問題について(反応:' emptystate 'コンポーネントを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/ml318097/react-create-an-emptystate-component-n7lテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol