嘿，我是 Juro，我是 django-components 的維護者之一。在 v0.90-0.94 版本中，我們添加了一些功能，使模板中的元件使用更加靈活，類似於 JSX / Vue。

（此資訊已經有點過時了（一個月前發布；最新的是v0.101），因為我正忙著添加對JS / CSS 變數、TypeScript 和Sass 以及HTML 片段的支援。令人興奮的東西！

無論如何，以下是 blog_post 元件，它接受從 blog_post_props 套用的標題、id 和附加 kwargs：

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

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

以上是多個特徵的組合：

1.自關閉標籤：

而非

{% 元件“my_component” %} {% 結束組件 %}

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

您現在可以簡單地寫

{% 元件“my_component”/%}

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

2.多行標籤：

django_components 現在自動設定 Django 以允許多行標籤。因此，不要將所有內容都塞在一行中：

{% 組件 "blog_post" title="abcdef..."author="John Wick" date_published="2024-08-28" %} {% 結束組件 %}

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

您可以將其分散到多行：

{% 元件“blog_post” 標題=“abcdef...” 作者=《約翰威克》 日期發布=“2024-08-28” /%}

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

3.擴充運算子：

類似於 JSX 中的 ...props 運算子或 Vue 中的 v-bind，這會將 props / kwargs 插入給定位置。

所以代替

{% 元件“blog_post” 標題=“abcdef...” 作者=《約翰威克》 日期發布=“2024-08-28” /%}

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

您可以將 kwargs 放入字典中，然後套用它：

＃ Python 道具={ "title": "abcdef...", “作者”：“約翰威克”， “發布日期”：“2024-08-28” }

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

{# 薑戈 #} {% 元件“blog_post” ...props %}

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

4。元件輸入中字串文字內的範本標籤：

您現在可以在元件輸入中使用範本標籤和篩選器：

{% 元件 'blog_post' “作為位置參數 {# yay #}” title="{{ person.first_name }} {{ person.last_name }}" id="{% random_int 10 20 %}" readonly =“{{可編輯|不可}}” /%}

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

這樣您就不必每次需要格式化值時都定義額外的變數。

請注意，當只有一個標籤且周圍沒有額外文字時，結果將作為值傳遞。因此「{% random_int 10 20 %}」傳遞一個數字，「{{ editable|not }}」傳遞一個布林值。

您甚至可以更進一步，獲得與 Vue 或 React 類似的體驗，您可以在其中評估任意程式碼表達式，又名類似於：

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

這可以透過 django-expr 實現，它添加了一個 expr 標籤和過濾器，您可以使用它來計算模板中的 Python 表達式：

{% 元件“my_form” value="{% expr 'input_value if is_enabled else None' %}" /%}

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

5。支援 {% comp_name %} {% endcomp_name %} 和 TagFormatter

預設情況下，元件是使用元件標籤編寫的，後面跟著元件的名稱：

{% 元件「button」 href="..." 已停用 %} 點我吧！ {% 結束組件 %}

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

您現在可以更改此設定（甚至可以自己製作！）。

例如，將 COMPONENTS.tag_formatter 設定為「django_components.shorthand_component_formatter」允許您編寫以下元件：

{% 按鈕 href="..." 已停用 %} 點我吧！ {% 結束按鈕 %}

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

---

還有更多功能即將推出，所以一定要試試 django-components！