再利用可能なコンポーネントのビルド方法
34696 ワード
テーブルはデータを表示するのに使われる最も一般的なUISの1つです.テーブルに応じて、我々は通常、クエリを検索し、データを操作する機能を追加する必要があります.しかし、テーブルが広くデータを表示するために使用されているので、テーブルのコードの同じチャンクをコピーしたりペーストしたりすると、他の機能を持つ別の機能を生成する必要があります.
我々は反応を使用しているので、より良い方法がこの問題を解決する必要があります.これはまさにこの記事でのことです.我々は、柔軟な滞在中に機能を提供する再利用可能なテーブルコンポーネントを作成するために反応成分の力を活用します.
そのためには、次の要件を満たす必要があります. データを表示する方法をカスタマイズする可能性を与えながら、適切にデータを表示する テーマシステムをサポートする 任意の種類の事前追加スタイリングを上書きすることができますが、ユーザーの願いに応じてスタイルを付けてください テーブルの密度を設定するなどの追加機能をサポートします 記事の目的は、そのコンポーネントをどのように構築するか、どのようにコンポーネントを柔軟にし、元のHTML表に近い状態で機能を追加する方法を示すことでそのコンポーネントを提示することです.
表コンポーネントの構築
好きなようにこのテーブルを使ってください!好きなようにカスタマイズしてください. プロジェクトに取り組んでいるときはいつでも、自分の再利用可能なコンポーネントを作る
我々は反応を使用しているので、より良い方法がこの問題を解決する必要があります.これはまさにこの記事でのことです.我々は、柔軟な滞在中に機能を提供する再利用可能なテーブルコンポーネントを作成するために反応成分の力を活用します.
そのためには、次の要件を満たす必要があります.
表コンポーネントの構築
ファイル設定
まず第一に、我々はいくつかの設定をしなければならない.
1 -インデックス.JS :ユーザーがテーブルを使用する方法をシミュレートします.ここで使用するテーブルコンポーネントを呼び出します.
import React from "react";
import ReactDOM from "react-dom";
import Table from "./Table/Table";
import "./styles.css";
function App() {
...
return (
<div className="App">
<Table ... />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
2 -表.JS :実際のコンポーネント.これは、いくつかの小道具を受信し、テーブルを返すシンプルな機能コンポーネントから構成され、他の機能表のコンポーネントは、ヘッダー、テーブルデータとテーブルの行を表す.このファイルは、ユーザーが表コンポーネントの背後のロジックを表すときには表示されません.
import React from "react";
export default function Table(props) {
return <table {...props} />;
}
Table.TH = function TH(props) {
return <th {...props} />;
};
Table.TR = function TR(props) {
return <tr {...props} />;
};
Table.TD = function TD(props) {
return <td {...props} />;
};
3 -スタイルシート.CSS :どのようにユーザーがテーブルをスタイルをシミュレートすることができます.これは、テーブルコンポーネントに独自のスタイルを追加できる場所です.
.App {
font-family: sans-serif;
text-align: center;
}
ファイルを設定したので、テーブルデータの表示方法を考えてみましょう.
1つの機能は、1つのテーブルを作成します。
次のデータを表示したいと思います
二つの方法があります.
1 -表のエクスポートコンポーネントの使用
利用可能Table.TR , Table.TD and Table.TH このテーブルを作成するには、次の手順に従います.
function App() {
...
return (
<div className="App">
<Table>
<thead>
<Table.TR>
<Table.TH>Name</Table.TH>
<Table.TH>Age</Table.TH>
</Table.TR>
</thead>
<tbody>
<Table.TR>
<Table.TD>Anssam</Table.TD>
<Table.TD>20</Table.TD>
</Table.TR>
</tbody>
</Table>
</div>
);
}
ここでの利点は、ユーザーがアイコンをカスタマイズすることができます、画像、テーブル…行をカスタマイズする.
2 -データ小道具を使用してオブジェクト
ユーザーがテーブルにいくつかの「生のテキストデータ」を表示したいだけであると言います.この場合、ユーザは単にデータをプロップとしてテーブル部品に渡す必要があります.
function App() {
const data = [
{
Name: "Anssam",
Age: "20"
}
];
return (
<div className="App">
<Table data={data}/>
</div>
);
}
そして、データが自動的に表示されます!
が、どのように動作しますか?
データオブジェクトの構造に注意してください.const [data = [{Name: "Anssam", Age: "20"}];これはオブジェクトの配列です.オブジェクトのキーは、テーブルヘッダーのような列であり、値は特定の列のいくつかの行のデータです.
テーブルのコンポーネントは、ユーザーが表示したいデータを持っているので、最初にそのデータからテーブルのヘッダーを抽出しようとします.
ヘッダー
データプロップオブジェクトの構造を覚えていますか?このデータプロップ内の任意の要素のキーからヘッダーを抽出できます.そうするためには、単にObject.keys(SOME_DATA_ELEMENT) オブジェクトのキーの配列を返します.
データ配列の最初のオブジェクトを使用してヘッダを取得しましょう.
const firstRow = props.data[0];
const headers = Object.keys(firstRow);
headers はテーブルのヘッダを含む配列です.しかし、これは我々がレンダリングしたいものではない:私たちはth ヘッダー要素.我々の使用の時間ですTable.TH 成分!
const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);
そして今、我々はそれらを包むことができますTable.TR コンポーネントとテーブル機能コンポーネントに問い合わせて、以下のようにします.
export default function Table({ children, ...props }) {
const firstRow = props.data[0];
const headers = Object.keys(firstRow);
const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);
return (
<table {...props}>
<Table.TR>
{headers.map(el => (
<Table.TH>{el}</Table.TH>
))}
</Table.TR>
</table>
);
}
テーブル本体データ
それではテーブル内の行のようにテーブルデータをどのようにレンダリングするかを見てみましょう.ダイビングに入る前に、次の表のデータをどのようにレンダリングできるかを考えてみましょう.
私たちは既にAからヘッダを持っていますが、現在は"ANSSAM "と"20 "という値で行が必要です.
<tr>
<td>Anssam</td>
<td>20</td>
</tr>
Quick reminder on the structure of the data prop object:
[{Name: "Anssam", Age: "21"}]
データプロップを見ると、関数を使って特定の行の値を直接抽出できますObject.values(SOME_DATA_ELEMENT) . この関数は値の配列を返します.また、データプロップ内の各要素に対して行を作成しなければならないことを知っていますSOME_ARRAY.map(SOME_FUNCTION) 各要素を通過する関数
畝
const rows = props.data.map(el => (
<Table.TR>
{Object.values(el).map(el => (
<Table.TD>{el}</Table.TD>
))}
</Table.TR>
));
これで、以下の関数を得ることができます.
畝
export default function Table({ children, ...props }) {
....
const rows = props.data.map(el => (
<Table.TR>
{Object.values(el).map(el => (
<Table.TD>{el}</Table.TD>
))}
</Table.TR>
));
return (
<table {...props}>
....
<tbody>{rows}</tbody>
</table>
);
}
楊峰🎉! テーブルにデータを単に表示するだけで行います.
2つの特徴：我々のテーブルにスタイルを加えて、それを「カスタマイズ可能なスタイル」にすること
ユーザーがテーブルコンポーネントのスタイルをその状態に依存させたいと言います.そのような方法の一つとして、条件付きのCSSクラス名を追加したり、コンポーネントの状態に応じて呼び出したりする方法があります.
しかし、これはボイラープレートであり、読みやすさを減らすことができます.
そのため、ダイナミックなスタイリングをサポートできるツールを使用する必要がありますstyled-components ! スタイルのコンポーネントは、スタイルのコンポーネントにタグ付けされたテンプレートリテラルを利用します.これは、コンポーネントをページ上でレンダリングされ、そのスタイルを注入追跡します.畝
1 -最初にスタイルを設定します.以下のようにコンポーネントごとのスタイルをすべて含むjsファイル
export const Table = styled.table`
table-layout: fixed;
...
width: 100%;
display: table;
`;
Note: Notice the styled.table? This is basically to say that our const Table is basically a table dom element. If we wished for it to be a div, we would do styled.div.
2 -次に、そのようなスタイルをコンポーネントとして扱います.
export default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
...
</Styled.Table>
);
}
ご覧のように、スタイリングはコンポーネントに直接結び付けられていますので、クラス名を導入する必要はありません.また、無名のCSSファイルを使ってクラス名をチェックして、どのコンポーネントを使用するかをチェックします.畝
誰かがテーブルコンポーネントをプロジェクトに追加し、スタイルを上書きしたい場合はどうしますか?
彼らはそれをカスタマイズすることができます!テーブルコンポーネントは、ユーザーが追加したいスタイルの種類をサポートします.したがって、ユーザーは普通のCSS、スタイルのコンポーネント、SASSを使用して、独自のスタイルシートを使用して既存のスタイルを上書きすることができます.
特徴1
ユーザーがテーブルをスタイリングするために使用できる、あらかじめ構築されたテーマシステムを追加しましょう.私たちは2つの簡単なテーマを行います.
そうするために、ユーザーはちょうどそのようにテーマ柱のテーマの値のために「暗い」と「光」の間で選択されなければなりません:
畝
function App() {
...
return (
<div className="App">
<Table
...
theme={Table.THEME.LIGHT}
/>
</div>
);
}
どうやって動くの?
まず、私たちはTHEME 変数
畝
Table.THEME = {
DARK: "dark",
LIGHT: "light"
};
次に、スタイルコンポーネントを使用したテーマプロップに従って、テーブルコンポーネントを動的にスタイルします.
私はすべてのコンポーネントのスタイルを越えないので、ヘッダー要素のスタイルを見てみましょう.我々はテーマに応じてヘッダーの背景を変更したいと言う私たちは、背景を黒のテーマの黒と白の光のテーマをしたい.そうするために、我々はそのテーマをStyled.TH コンポーネント.
それから、我々はそのpropを我々のTH スタイルのコンポーネント.として、テーマプロップに従って異なるスタイルを返します.
export const TH = styled.th`
background-color: ${props => {
return props.theme === "dark" ? "#212529" : "#e8e5e5fa";
}};
...
border-bottom-color: ${props => {
return props.theme === "dark" ? "#dee2e6" : "black";
}};
color: ${props => {
return props.theme === "dark" ? "white" : "black";
}
}};
`;
しかし、どのようにテーマ支柱を得ましたか?
親テーブルコンポーネントがユーザーからその小道具を受け取るのを思い出してください.また、テーマのプロップは、すべての組み込みのための重要な支柱であることを知っているTable.TH , Table.TR and Table.TD コンポーネントは、選択したテーマに従ってスタイルを編集したい場合があります.これは、我々がテーマデータをグローバルデータとして持たなければならないことを意味します.そのためには、コンテキストを定義しますthemeContext , テーマを表す
//for passing the theme to all of the components
const themeContext = React.createContext();
我々はテーブル全体を我々のラップで包むthemeContext.Provider コンポーネント
export default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
<themeContext.Provider value={props.theme}>
...
</themeContext.Provider>
</Styled.Table>
);
}
それから、我々の文脈でそのテーマ価値を読んでくださいTable.TH コンポーネントuseContext フック:
Table.TH = function TH({ children, ...props }) {
const theme = React.useContext(themeContext);
return (
<Styled.TH {...props} theme={theme}>
{children}
</Styled.TH>
);
};
そして、私たちのテーマのスタイルの残りの部分は、そのロジックを使用することができます!🎉
特徴△4：表示密度
テーブルをサポートする別のクールな機能は、密度を設定する機能です.
畝
function App() {
return (
<div className="App">
<Table
...
density={Table.DENSITY.HIGH}
/>
</div>
);
}
テーブル密度ユーザーは、2つの事前に構築されたテーマのようにチョイス、ユーザーは3つのオプションの間に選択することが制限されています.
畝
Table.DENSITY = {
LOW: "low",
AVERAGE: "avg",
HIGH: "high"
};
各オプションは、テーブルに渡されたプロップに従ってコンポーネントのスタイルを編集します.この場合、テーブルの高さは、濃度プロップに応じて変更されます
export const Table = styled.table`
...
height: ${props => {
switch (props.density) {
case "low":
return "130px";
case "avg":
return "90px";
case "high":
return "5px";
default:
return "50vh";
}
}};
`;
そして今我々は最後の機能を行っている!🎉 あなたは、我々がしたすべてをチェックアウトすることができますhere .
結論
今すぐできます.
import React from "react";
import ReactDOM from "react-dom";
import Table from "./Table/Table";
import "./styles.css";
function App() {
...
return (
<div className="App">
<Table ... />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
import React from "react";
export default function Table(props) {
return <table {...props} />;
}
Table.TH = function TH(props) {
return <th {...props} />;
};
Table.TR = function TR(props) {
return <tr {...props} />;
};
Table.TD = function TD(props) {
return <td {...props} />;
};
.App {
font-family: sans-serif;
text-align: center;
}
次のデータを表示したいと思います
二つの方法があります.
1 -表のエクスポートコンポーネントの使用
利用可能
Table.TR , Table.TD and Table.TH このテーブルを作成するには、次の手順に従います.function App() {
...
return (
<div className="App">
<Table>
<thead>
<Table.TR>
<Table.TH>Name</Table.TH>
<Table.TH>Age</Table.TH>
</Table.TR>
</thead>
<tbody>
<Table.TR>
<Table.TD>Anssam</Table.TD>
<Table.TD>20</Table.TD>
</Table.TR>
</tbody>
</Table>
</div>
);
}
2 -データ小道具を使用してオブジェクト
ユーザーがテーブルにいくつかの「生のテキストデータ」を表示したいだけであると言います.この場合、ユーザは単にデータをプロップとしてテーブル部品に渡す必要があります.
function App() {
const data = [
{
Name: "Anssam",
Age: "20"
}
];
return (
<div className="App">
<Table data={data}/>
</div>
);
}
が、どのように動作しますか?
データオブジェクトの構造に注意してください.
const [data = [{Name: "Anssam", Age: "20"}];これはオブジェクトの配列です.オブジェクトのキーは、テーブルヘッダーのような列であり、値は特定の列のいくつかの行のデータです.テーブルのコンポーネントは、ユーザーが表示したいデータを持っているので、最初にそのデータからテーブルのヘッダーを抽出しようとします.
ヘッダー
データプロップオブジェクトの構造を覚えていますか?このデータプロップ内の任意の要素のキーからヘッダーを抽出できます.そうするためには、単に
Object.keys(SOME_DATA_ELEMENT) オブジェクトのキーの配列を返します.データ配列の最初のオブジェクトを使用してヘッダを取得しましょう.
const firstRow = props.data[0];
const headers = Object.keys(firstRow);
headers はテーブルのヘッダを含む配列です.しかし、これは我々がレンダリングしたいものではない:私たちはth ヘッダー要素.我々の使用の時間ですTable.TH 成分!const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);
Table.TR コンポーネントとテーブル機能コンポーネントに問い合わせて、以下のようにします.export default function Table({ children, ...props }) {
const firstRow = props.data[0];
const headers = Object.keys(firstRow);
const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);
return (
<table {...props}>
<Table.TR>
{headers.map(el => (
<Table.TH>{el}</Table.TH>
))}
</Table.TR>
</table>
);
}
テーブル本体データ
それではテーブル内の行のようにテーブルデータをどのようにレンダリングするかを見てみましょう.ダイビングに入る前に、次の表のデータをどのようにレンダリングできるかを考えてみましょう.
私たちは既にAからヘッダを持っていますが、現在は"ANSSAM "と"20 "という値で行が必要です.
<tr>
<td>Anssam</td>
<td>20</td>
</tr>
Quick reminder on the structure of the data prop object:
[{Name: "Anssam", Age: "21"}]
データプロップを見ると、関数を使って特定の行の値を直接抽出できます
Object.values(SOME_DATA_ELEMENT) . この関数は値の配列を返します.また、データプロップ内の各要素に対して行を作成しなければならないことを知っていますSOME_ARRAY.map(SOME_FUNCTION) 各要素を通過する関数畝
const rows = props.data.map(el => (
<Table.TR>
{Object.values(el).map(el => (
<Table.TD>{el}</Table.TD>
))}
</Table.TR>
));
畝
export default function Table({ children, ...props }) {
....
const rows = props.data.map(el => (
<Table.TR>
{Object.values(el).map(el => (
<Table.TD>{el}</Table.TD>
))}
</Table.TR>
));
return (
<table {...props}>
....
<tbody>{rows}</tbody>
</table>
);
}
2つの特徴：我々のテーブルにスタイルを加えて、それを「カスタマイズ可能なスタイル」にすること
ユーザーがテーブルコンポーネントのスタイルをその状態に依存させたいと言います.そのような方法の一つとして、条件付きのCSSクラス名を追加したり、コンポーネントの状態に応じて呼び出したりする方法があります.
しかし、これはボイラープレートであり、読みやすさを減らすことができます.
そのため、ダイナミックなスタイリングをサポートできるツールを使用する必要がありますstyled-components ! スタイルのコンポーネントは、スタイルのコンポーネントにタグ付けされたテンプレートリテラルを利用します.これは、コンポーネントをページ上でレンダリングされ、そのスタイルを注入追跡します.畝
1 -最初にスタイルを設定します.以下のようにコンポーネントごとのスタイルをすべて含むjsファイル
export const Table = styled.table`
table-layout: fixed;
...
width: 100%;
display: table;
`;
Note: Notice the styled.table? This is basically to say that our const Table is basically a table dom element. If we wished for it to be a div, we would do styled.div.
2 -次に、そのようなスタイルをコンポーネントとして扱います.
export default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
...
</Styled.Table>
);
}
ご覧のように、スタイリングはコンポーネントに直接結び付けられていますので、クラス名を導入する必要はありません.また、無名のCSSファイルを使ってクラス名をチェックして、どのコンポーネントを使用するかをチェックします.畝
誰かがテーブルコンポーネントをプロジェクトに追加し、スタイルを上書きしたい場合はどうしますか?
彼らはそれをカスタマイズすることができます!テーブルコンポーネントは、ユーザーが追加したいスタイルの種類をサポートします.したがって、ユーザーは普通のCSS、スタイルのコンポーネント、SASSを使用して、独自のスタイルシートを使用して既存のスタイルを上書きすることができます.
特徴1
ユーザーがテーブルをスタイリングするために使用できる、あらかじめ構築されたテーマシステムを追加しましょう.私たちは2つの簡単なテーマを行います.
そうするために、ユーザーはちょうどそのようにテーマ柱のテーマの値のために「暗い」と「光」の間で選択されなければなりません:
畝
function App() {
...
return (
<div className="App">
<Table
...
theme={Table.THEME.LIGHT}
/>
</div>
);
}
どうやって動くの?
まず、私たちはTHEME 変数
畝
Table.THEME = {
DARK: "dark",
LIGHT: "light"
};
次に、スタイルコンポーネントを使用したテーマプロップに従って、テーブルコンポーネントを動的にスタイルします.
私はすべてのコンポーネントのスタイルを越えないので、ヘッダー要素のスタイルを見てみましょう.我々はテーマに応じてヘッダーの背景を変更したいと言う私たちは、背景を黒のテーマの黒と白の光のテーマをしたい.そうするために、我々はそのテーマをStyled.TH コンポーネント.
それから、我々はそのpropを我々のTH スタイルのコンポーネント.として、テーマプロップに従って異なるスタイルを返します.
export const TH = styled.th`
background-color: ${props => {
return props.theme === "dark" ? "#212529" : "#e8e5e5fa";
}};
...
border-bottom-color: ${props => {
return props.theme === "dark" ? "#dee2e6" : "black";
}};
color: ${props => {
return props.theme === "dark" ? "white" : "black";
}
}};
`;
しかし、どのようにテーマ支柱を得ましたか?
親テーブルコンポーネントがユーザーからその小道具を受け取るのを思い出してください.また、テーマのプロップは、すべての組み込みのための重要な支柱であることを知っているTable.TH , Table.TR and Table.TD コンポーネントは、選択したテーマに従ってスタイルを編集したい場合があります.これは、我々がテーマデータをグローバルデータとして持たなければならないことを意味します.そのためには、コンテキストを定義しますthemeContext , テーマを表す
//for passing the theme to all of the components
const themeContext = React.createContext();
我々はテーブル全体を我々のラップで包むthemeContext.Provider コンポーネント
export default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
<themeContext.Provider value={props.theme}>
...
</themeContext.Provider>
</Styled.Table>
);
}
それから、我々の文脈でそのテーマ価値を読んでくださいTable.TH コンポーネントuseContext フック:
Table.TH = function TH({ children, ...props }) {
const theme = React.useContext(themeContext);
return (
<Styled.TH {...props} theme={theme}>
{children}
</Styled.TH>
);
};
そして、私たちのテーマのスタイルの残りの部分は、そのロジックを使用することができます!🎉
特徴△4：表示密度
テーブルをサポートする別のクールな機能は、密度を設定する機能です.
畝
function App() {
return (
<div className="App">
<Table
...
density={Table.DENSITY.HIGH}
/>
</div>
);
}
テーブル密度ユーザーは、2つの事前に構築されたテーマのようにチョイス、ユーザーは3つのオプションの間に選択することが制限されています.
畝
Table.DENSITY = {
LOW: "low",
AVERAGE: "avg",
HIGH: "high"
};
各オプションは、テーブルに渡されたプロップに従ってコンポーネントのスタイルを編集します.この場合、テーブルの高さは、濃度プロップに応じて変更されます
export const Table = styled.table`
...
height: ${props => {
switch (props.density) {
case "low":
return "130px";
case "avg":
return "90px";
case "high":
return "5px";
default:
return "50vh";
}
}};
`;
そして今我々は最後の機能を行っている!🎉 あなたは、我々がしたすべてをチェックアウトすることができますhere .
結論
今すぐできます.
export const Table = styled.table`
table-layout: fixed;
...
width: 100%;
display: table;
`;
Note: Notice the styled.table? This is basically to say that our const Table is basically a table dom element. If we wished for it to be a div, we would do styled.div.
export default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
...
</Styled.Table>
);
}
ユーザーがテーブルをスタイリングするために使用できる、あらかじめ構築されたテーマシステムを追加しましょう.私たちは2つの簡単なテーマを行います.
そうするために、ユーザーはちょうどそのようにテーマ柱のテーマの値のために「暗い」と「光」の間で選択されなければなりません:
畝
function App() {
...
return (
<div className="App">
<Table
...
theme={Table.THEME.LIGHT}
/>
</div>
);
}
まず、私たちは
THEME 変数畝
Table.THEME = {
DARK: "dark",
LIGHT: "light"
};
私はすべてのコンポーネントのスタイルを越えないので、ヘッダー要素のスタイルを見てみましょう.我々はテーマに応じてヘッダーの背景を変更したいと言う私たちは、背景を黒のテーマの黒と白の光のテーマをしたい.そうするために、我々はそのテーマを
Styled.TH コンポーネント.それから、我々はそのpropを我々の
TH スタイルのコンポーネント.として、テーマプロップに従って異なるスタイルを返します.export const TH = styled.th`
background-color: ${props => {
return props.theme === "dark" ? "#212529" : "#e8e5e5fa";
}};
...
border-bottom-color: ${props => {
return props.theme === "dark" ? "#dee2e6" : "black";
}};
color: ${props => {
return props.theme === "dark" ? "white" : "black";
}
}};
`;
親テーブルコンポーネントがユーザーからその小道具を受け取るのを思い出してください.また、テーマのプロップは、すべての組み込みのための重要な支柱であることを知っている
Table.TH , Table.TR and Table.TD コンポーネントは、選択したテーマに従ってスタイルを編集したい場合があります.これは、我々がテーマデータをグローバルデータとして持たなければならないことを意味します.そのためには、コンテキストを定義しますthemeContext , テーマを表す//for passing the theme to all of the components
const themeContext = React.createContext();
themeContext.Provider コンポーネントexport default function Table({ children, ...props }) {
return (
<Styled.Table {...props}>
<themeContext.Provider value={props.theme}>
...
</themeContext.Provider>
</Styled.Table>
);
}
Table.TH コンポーネントuseContext フック:Table.TH = function TH({ children, ...props }) {
const theme = React.useContext(themeContext);
return (
<Styled.TH {...props} theme={theme}>
{children}
</Styled.TH>
);
};
特徴△4：表示密度
テーブルをサポートする別のクールな機能は、密度を設定する機能です.
畝
function App() {
return (
<div className="App">
<Table
...
density={Table.DENSITY.HIGH}
/>
</div>
);
}
テーブル密度ユーザーは、2つの事前に構築されたテーマのようにチョイス、ユーザーは3つのオプションの間に選択することが制限されています.
畝
Table.DENSITY = {
LOW: "low",
AVERAGE: "avg",
HIGH: "high"
};
各オプションは、テーブルに渡されたプロップに従ってコンポーネントのスタイルを編集します.この場合、テーブルの高さは、濃度プロップに応じて変更されます
export const Table = styled.table`
...
height: ${props => {
switch (props.density) {
case "low":
return "130px";
case "avg":
return "90px";
case "high":
return "5px";
default:
return "50vh";
}
}};
`;
そして今我々は最後の機能を行っている!🎉 あなたは、我々がしたすべてをチェックアウトすることができますhere .
結論
今すぐできます.
function App() {
return (
<div className="App">
<Table
...
density={Table.DENSITY.HIGH}
/>
</div>
);
}
Table.DENSITY = {
LOW: "low",
AVERAGE: "avg",
HIGH: "high"
};
export const Table = styled.table`
...
height: ${props => {
switch (props.density) {
case "low":
return "130px";
case "avg":
return "90px";
case "high":
return "5px";
default:
return "50vh";
}
}};
`;
今すぐできます.
Notice: I hope this article was helpful, or that you gained something from it! My brothers and I are learning more about React and publish articles every month. Follow me on twitter to get in touch! :)
Reference
この問題について(再利用可能なコンポーネントのビルド方法), 我々は、より多くの情報をここで見つけました https://dev.to/anssamghezala/how-to-build-your-reusable-component-1mcbテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol