こんにちは、私は Juro です。django コンポーネントのメンテナの 1 人です。リリース v0.90 ～ 0.94 では、JSX / Vue と同様に、テンプレートでのコンポーネントの使用をより柔軟にする機能を追加しました。

(JS / CSS 変数、TypeScript と Sass、HTML フラグメントのサポートを追加するのに忙しいので、この情報はすでに少し古くなっています (1 か月前にリリースされました。最新は v0.101)。このアップデートをまだ共有していないことに気づきました!)

とにかく、以下は blog_post_props から適用されるタイトル、ID、および追加の kwargs を受け入れるコンポーネント blog_post です:

    {% blog_post
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      ...blog_post_props
    / %}

上記は複数の機能の組み合わせです:

1.自己終了タグ:

の代わりに

    {% component "my_component" %}
    {% endcomponent %}

簡単に書けるようになりました

    {% component "my_component" / %}

2.複数行タグ:

django_components は、複数行のタグを許可するように Django を自動的に構成するようになりました。したがって、すべてを 1 行に詰め込む代わりに:

    {% component "blog_post" title="abcdef..." author="John Wick" date_published="2024-08-28" %}
    {% endcomponent %}

複数行にまたがることもできます:

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

3.スプレッド演算子:

JSX の ...props 演算子または Vue の v-bind と同様に、これは props / kwargs を指定された位置に挿入します。

では代わりに

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

辞書に kwargs を入れて、それを適用できます:

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }

    {# Django #}
    {% component "blog_post" ...props %}

4.コンポーネント入力の文字列リテラル内のテンプレート タグ:

コンポーネント入力内でテンプレート タグとフィルターを使用できるようになりました:

    {% component 'blog_post'
      "As positional arg {# yay #}"
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      readonly="{{ editable|not }}"
    / %}

これにより、値をフォーマットする必要があるたびに追加の変数を定義する必要がなくなります。

タグが 1 つだけで、その周囲に余分なテキストがない場合、結果は値として渡されることに注意してください。したがって、「{%random_int 10 20 %}」は数値を渡し、「{{ editable|not }}」はブール値を渡します。

さらに一歩進んで、Vue や React と同様のエクスペリエンスを得ることができます。そこでは、次のような任意のコード式を評価できます。

これは、テンプレート内から Python 式を評価するために使用できる expr タグとフィルターを追加する django-expr で可能になります:

    {% component "my_form"
      value="{% expr 'input_value if is_enabled else None' %}"
    / %}

5. {% comp_name %} {% endcomp_name %} および TagFormatter

デフォルトでは、コンポーネントはコンポーネント タグに続いてコンポーネントの名前を使用して記述されます:

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}

これを変更できるようになりました (独自に作成することもできます!)。

たとえば、COMPONENTS.tag_formatter を「django_components.shorthand_component_formatter」に設定すると、次のようなコンポーネントを作成できます:

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}

これからもたくさんの機能が登場するので、ぜひ django-components を試してみてください!