4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

1. インラインスタイル

仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェクトを渡す必要があります。インラインスタイルを実装するには、スタイルオブジェクトを記述する必要があります。このスタイルオブジェクトは、 render関数内、コンポーネントプロトタイプ上、外部jsファイル内など、さまざまな場所に配置できます。
注: ここには 2 つの括弧があります。最初の括弧は JSX に JS を挿入していることを示し、2 番目の括弧はオブジェクトの括弧です。

<p style={{color:'red', fontSize:'14px'}}>こんにちは世界</p>

2. クラスを使用する

React では各コンポーネントを独立したエンティティと見なすため、インライン スタイルを使用することを推奨しています。

実際、ほとんどの場合、要素に多くのクラス名を追加しますが、 class classNameとして記述する必要があることに注意してください(結局のところ、jsのようなコードを記述し、jsルールを受け取るため、 classはキーワードです)

React をインポートします。{ コンポーネント } を 'react' からインポートします。
1. 外部で定義されたスタイルをインポートする './style.css' からスタイルをインポートする

クラスClassStyleはComponentを拡張します{
  与える() {
    // js ロジック let className = cx({
      フォント: false
    })
    戻る (
      <>
        <div className={className}>こんにちは</div>
        <p className='setstyle'>スタイル</p>
        <Divコンテナ>
          世界
        </DivContainer>
      <>
    )
  }
}

デフォルトのClassStyleをエクスポートする

3. 異なるclassNames条件に異なるスタイルを追加する

場合によっては、完了ステータス (完了は緑、未完了は赤など) に応じて異なるスタイルを追加する必要があります。この場合、classnames パッケージを使用することをお勧めします。
目的:
React Nativeは複数のclassNameを動的に追加するため、エラーが報告されます。

'./style.css' からスタイルをインポートします
<div className={style.class1 style.class2}</div>

最終的なレンダリング効果は次のとおりです。

<div クラス = 'クラス1 クラス2'></div>

ダウンロードしてインストールする

npm i -S クラス名

使用

'classnames' からクラス名をインポートします
<div className=クラス名({
    'class1': 真、
    'クラス2': 真
    )>
</div>

4. CSS-in-JS

styled-components React 用に書かれた CSS-in-JS フレームワークです。簡単に言えば、CSS を JS で記述することを意味します。 npmリンク

  • 従来のフロントエンド ソリューションでは、「関心の分離」の原則が推奨されています。HTML、CSS、JavaScript はそれぞれの機能を実行し、分離する必要があります。
  • React プロジェクトでは、コンポーネント ベースのソリューションがより推奨されており、HTML、CSS、JavaScript を集中的に記述および管理する方法が自然に形成されます。

styled-components は、おそらく CSS-in-JS の最も人気のあるライブラリです。styled-components を使用すると、ES6 のタグ テンプレート文字列構文を使用して、スタイル設定が必要なコンポーネントの一連の CSS プロパティを定義できます。コンポーネントの JS コードが解析され実行されると、styled-components は CSS セレクターを動的に生成し、対応する CSS スタイルをスタイル タグの形式でヘッド タグに挿入します。動的に生成された CSS セレクターには、スタイルの競合を避けるためにグローバルな一意性を保証する小さなハッシュ値が設定されます。

1. インストール

npm i -S スタイル付きコンポーネント

スタイルの定義
2. スタイルjsファイル

'styled-components' から styled をインポートします
const タイトル = styled.div`
    色:赤;
    フォントサイズ:16px;
    h3{
        色:青;
        フォントサイズ:20px;
    }
`
輸出 {
    タイトル
}

通常のReactコンポーネントと同じようにタイトルを使用して表示します。

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Title } をインポートします
クラスAppはComponentを拡張します{
与える() {
    戻る (
        <div>
            <タイトル>
            私はただのタイトルです <h3>Hello World</h3>
            </タイトル>
        </div>
        );
    }
}
デフォルトアプリをエクスポート

3. スタイル継承スタイル

'styled-components' から styled をインポートします
const ボタン = styled.button`
    フォントサイズ: 20px;
    境界線: 1px 実線の赤;
    境界線の半径: 3px;
`;

// Button を継承し、いくつかのスタイルをオーバーライドする新しいコンポーネント const Button2 = styled(Button)`
    色: 青;
    境界線の色: 黄色;
`;

輸出 {
    ボタン、
    ボタン2
}

見せる

React をインポートします。{ コンポーネント } を 'react' からインポートします。
輸入 {
ボタン、
ボタン2
} './Styles' から
クラスAppはComponentを拡張します{
与える() {
    戻る (
    <div>
        <Button>私はボタン1です</Button>
        <Button2>私はボタン2です</Button2>
    </div>
    );
}
}
デフォルトアプリをエクスポート

4. 属性転送スタイル

'styled-components' から styled をインポートします
const 入力 = styled.input`
    色: ${props => props.inputColor || "青"};
    境界線の半径: 3px;
`;
輸出 {
    入力
}

見せる

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Input } をインポートします
クラスAppはComponentを拡張します{
与える() {
    戻る (
    <div>
        <Input defaultValue="Hello" inputColor="red"></Input>
    </div>
    );
}
}
デフォルトアプリをエクスポート

4つのReactコンポーネントでDOMスタイルを設定する方法についての記事はこれで終わりです。ReactコンポーネントのDOMスタイルに関する関連コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • React で指定された DOM ノードにコンポーネントをレンダリングする方法

<<:  タイプファイルの入力ボタン機能の研究

>>:  MYSQL 文字列強制変換メソッドの例

推薦する

ウェブページのコメントにより IE でテキストがオーバーフローする

実験コードは次のとおりです。 </head> <body> <div ...

Linux centos7 に phpMyAdmin をインストールするチュートリアル

yum install httpd php mariadb-server –yランプの動作環境を設定...

Dockerを使用して外部からアクセス可能なMySQLを構築する詳細な説明

MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...

ボタンに醜い灰色の枠線が付いています。これを削除するにはどうすればよいですか?

ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...

シェルスクリプトによるDockerコンテナの起動順序の制御の詳細な説明

1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション(データベ...

JavaScript はフロントエンド Web ページでカウントダウンを実装します

ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明

k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...

よく使用される MySQL 関数の完全なリスト (分類および要約)

1. 数学関数ABS(x) xの絶対値を返します。 BIN(x) xの2進値を返します(OCTは8...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...

Vueは複数の画像の追加、表示、削除を実装します

この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...

CUDA8.0とCUDA9.0はUbuntu16.04で共存します

序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...