React でのスタイル付きコンポーネントの簡単な実装に関する簡単な説明

今日はスタイル コンポーネント ライブラリについて書きました。このような強力なライブラリは本当に素晴らしいことがわかりました。その後、このライブラリの簡単な実装について 30 分かけて考えました。難しくないようです。言い換えれば、スタイル付きコンポーネントの基本的な使用法は非常に簡単です。

import styled from 'styled-components'
const Stylefoot=styled.div`
        background:lightblue;
        position:fixed;
        bottom:5px;
        width:100%;
        height:30px;
        display:flex;
        justify-content:space-between;
        margin:0;
        flex-direction:low;
        li{
            width:30%;
            list-style:none;
            background:yellow;
            text-align:center;
            line-height:30px;
            &:hover{
                background:blue;
            }
        }
    `
    <Stylefoot>
                <li>111</li>
                <li>111</li>
                <li>111</li>
        </Stylefoot>

よく見るとimported styledというクラスのようで、このクラスには静的メソッドがたくさんあるのですが、簡単に言うと複数のhtmlタグに対して複数のメソッドがあるはずなのですが、突然そうではないようですこの場合です。結局のところ、これほど愚かな人はいません。これほど多くの関数を書くということは、再利用することを意味します。インターフェイスを使用してインターフェイスを宣言し、それを制約しますが、それは間違いなく入力の形式から分離できません。その後、単純にそれをシミュレートするために関数を作成できます。 get インターフェイスを作成し、それを吸収します。`` パラメータを CSS スタイルに変換して、対応するノードを作成します。正確には、ユーザーから渡されたノードの名前を決定してから、createElement('name') を実行する必要があります。 、属性を対応する e に設定し、ノードをエクスポートし、ページを使用します。

class text 
{
    
    
    static get(e)
    {
    
       
       var node=document.createElement('input')
       node.style.cssText=e
       return node;
    }   
}

const A=text.get`background:red;
    color:black;
`

document.body.appendChild(A)
console.log(A);
console.log(typeof A);

モジュールのエクスポートは本当に楽しいです。