mixt 1.2.3

PropTypes类

在Mixt中，我们使用类型在组件内部的类中定义它们，该类命名为PropTypes

class TodoForm(Element):

    class PropTypes:
        add_url: str

    def render(self, context):
        return \
            <form method="post" action={self.add_url}>
                <label>New Todo: </label><itext name="todo" />
                <button type="submit">Add</button>
            </form>

在这里，我们定义了一个名为add_url的属性，它必须是一个字符串（str）。这使用了Python类型语法。

请注意，我们如何更改了

属性和子组件

看看如果我们的组件是用纯Python编写的，它会是什么样子

from mixt import Element, html

class TodoForm(Element):

    class PropTypes:
        add_url: str

    def render(self, context):
        return html.Form(method='post', action=self.add_url )(
            html.Label()(
                html.Raw("New Todo: ")
            ),
            html.InputText(name='todo'),
            html.Button(type='submit')(
                html.Raw("Add")  # or html.Rawhtml(text="Add")
            ),
        )

请注意，属性如何作为命名参数传递给组件，以及如何传递：。

这个纯Python组件也展示了它的工作方式：属性作为命名参数传递给组件类，然后调用该组件，将子组件作为位置参数传递给调用

ComponentClass(prop1="val1", prop2="val2")(
    Children1(),
    Children2(),
)

子组件是什么？子组件是其他标签内的标签。

在

• 一个带有属性id和两个子组件的html.Div组件

  • 一个不带子组件的html.Span组件

  • 一个带有子组件的html.P组件

    • 一个带有文本“foo”的html.RawHtml组件

注意，您可以玩转属性和子组件。首先，这是纯Python版本，以展示其工作原理

def render(self, context):
    props = {"prop1": "val1", "prop2": "val2"}
    children = [Children1(), Children2()]

    return ComponentClass(**props)(*children)
    # You can pass a list of children to to the call, so this would produce the same result:
    # ComponentClass(**props)(children)

然后是版本

def render(self, context):
    props = {"prop1": "val1", "prop2": "val2"}
    children = [<Children1/>, <Children2/>]

    return <ComponentClass {**props}>{*children}</ComponentClass>
    # or, the same, passing the children as a list:
    # return <ComponentClass {**props}>{children}</ComponentClass>

传递属性

现在让我们回到我们的属性。

如何将其传递给组件？

这正是我们传递给HTML标签属性的方式：它们实际上是HTML组件（在中定义）中定义的属性。我们支持在撰写本文时有效的（未废弃的）HTML5中的每个HTML标签及其属性（不包括废弃的属性）。

所以让我们这样做

print(<TodoForm add_url="/todo/add"/>)

<form method="post" action="/todo/add"><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

好的，我们的属性现在出现在渲染的HTML中。

验证

如果我们不传递一个字符串怎么办？我们在中说过我们想要一个字符串...

print(<TodoForm add_url=1/>)

<form method="post" action="1"><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

print(<TodoForm add_url=True/>)

mixt.exceptions.InvalidPropValueError:
<TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)

print(<TodoForm add_url={True}/>)

mixt.exceptions.InvalidPropValueError:
<TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)

print(<TodoForm add_url="True"/>)

mixt.exceptions.InvalidPropValueError:
<TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)

print(<TodoForm add_url={"True"}/>)

<form method="post" action="True"><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

print(<TodoForm add_url={""}/>)

<form method="post" action=""><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

print(<TodoForm add_url=""/>)

<form method="post" action=""><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

print(<TodoForm add_url=/>)

mixt.exceptions.GeneralParserError: <mixt parser> Unclosed Tags: <TodoForm>

print(<TodoForm add_url/>)

mixt.exceptions.InvalidPropValueError:
<TodoForm>.add_url: `True` is not a valid value for this prop (type: <class 'bool'>, expected: <class 'str'>)

必需属性

对于布尔属性来说，这是可以接受的。但这不是我们的情况。我们能做的最后一件事就是根本不设置属性

print(<TodoForm/>)
# this is the same: ``print(<TodoForm add_url=NotProvided />)```
# (``NotProvided`` must be imported from ``mixt``)

mixt.exceptions.UnsetPropError: <TodoForm>.add_url: prop is not set

这是可以理解的：我们尝试访问一个未设置的属性，当然我们无法使用它。

但如果我们不访问它怎么办？如果我们不打印组件，它就不会被渲染

<TodoForm/>

<TodoForm at 0x7fbd18ea5630>

因此，我们可以创建一个实例，但它将在渲染时失败。但是有一个方法可以防止这种情况。

默认情况下，所有属性都是可选的。而且你不必为每个属性使用python typing 模块中的 Optional 类型，这会变得很繁琐。

相反，mixt 提供了一个名为 Required 的类型，你可以像使用 Optionnal 一样使用它。

from mixt import Element, Required, html

class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]

    def render(self, context):
        # ...

所以我们刚刚说过我们想要一个字符串，并且它是必需的。

让我们再次尝试创建它而不传递属性

<TodoForm/>

mixt.exceptions.RequiredPropError: <TodoForm>.add_url: is a required prop but is not set

现在我们在程序中引发了早先的异常。

默认属性

为了查看属性的其他可能性，让我们添加一个新的属性来更改文本标签。但我们不希望它成为必需的，而是提供一个默认值。

为此，只需在 PropTypes 类中为属性添加一个值即可

class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]
        label: str = 'New Todo'

    def render(self, context):
        return \
            <form method="post" action={self.add_url}>
                <label>{self.label}: </label><itext name="todo" />
                <button type="submit">Add</button>
            </form>

现在让我们尝试不传递属性

print(<TodoForm add_url="/todo/add"/>)

<form method="post" action=""><label>New Todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

如果我们传递一个

print(<TodoForm add_url="/todo/add" label="Thing to do" />)

<form method="post" action="/todo/add"><label>Thing to do: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

它按预期工作。

请注意，你不能在属性 Required 的同时提供一个默认值。这没有意义，所以它会在类构造时尽可能早地进行检查。

class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]
        label: Required[str] = 'New Todo'

mixt.exceptions.PropTypeRequiredError: <TodoForm>.label: a prop with a default value cannot be required

当然，默认值必须与类型匹配！

class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]
        label: str = {'label': 'foo'}

mixt.exceptions.InvalidPropValueError:
<TodoForm>.label: `{'label': 'foo'}` is not a valid value for this prop (type: <class 'dict'>, expected: <class 'str'>)

选择

在我们的组件中，我们还想让它根据传递给它的“类型”来构造标签，但限制选择。为此，我们可以使用 Choices 类型。

from mixt import Choices, Element, Required, html


class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]
        type: Choices = ['todo', 'thing']

    def render(self, context):

        return \
            <form method="post" action={self.add_url}>
                <label>New {self.type}: </label><itext name="todo" />
                <button type="submit">Add</button>
            </form>

让我们试试

print(<TodoForm add_url="/todo/add" type="todo" />)
print(<TodoForm add_url="/todo/add" type="thing" />)

<form method="post" action="/todo/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>
<form method="post" action="/todo/add"><label>New thing: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

如果我们尝试传递一个不在可用选择范围内的值，它会失败，这也是意料之中的。

print(<TodoForm add_url="/todo/add" type="stuff" />)

mixt.exceptions.InvalidPropChoiceError: <TodoForm>.type: `stuff` is not a valid choice for this prop (must be in ['todo', 'thing'])

默认选择

但也许我们不想传递它，并使用默认值。结果会是什么？

print(<TodoForm add_url="/todo/add" />)

mixt.exceptions.UnsetPropError: <TodoForm>.type: prop is not set

因此，我们必须将 type 属性标记为必需的。

class PropTypes:
    add_url: Required[str]
    type: Required[Choices] = ['todo', 'thing']

因此，如果我们不传递它，它会在更早的时候失败。

print(<TodoForm add_url="/todo/add" />)

mixt.exceptions.RequiredPropError: <TodoForm>.type: is a required prop but is not set

但这不是我们想要的，我们想要一个默认值。

事实上，你注意到对于除了Choices类型之外，在PropTypes中设置一个值会给我们一个默认值。但对于Choices来说，情况不同，因为值是选择列表。

为此，我们有了DefaultChoices：它的工作方式与Choices相同，但使用列表中的第一个条目作为默认值。当然，与其他具有默认值的类型一样，它不能是Required。

让我们试试

from mixt import DefaultChoices, Element, Required, html


class TodoForm(Element):

    class PropTypes:
        add_url: Required[str]
        type: DefaultChoices = ['todo', 'thing']

print(<TodoForm add_url="/todo/add" />)

<form method="post" action="/todo/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

它按预期工作。

高级类型

在此之前，我们使用了简单类型，但你也可以使用更复杂的类型。

例如，我们将使add_url prop 接受一个函数，该函数将基于type prop 计算出 URL。但我们还想允许字符串，并带有默认值。

我们可以通过typing来实现这一点。我们的函数将接受一个字符串，type，并返回一个字符串，即 URL。

因此，可调用对象的语法是Callable[[str], str]，我们使用Union来接受类型为Callable或str的值。

from typing import Union, Callable
from mixt import DefaultChoices, Element, Required, html


class TodoForm(Element):

    class PropTypes:
        add_url: Union[Callable[[str], str], str] = "/todo/add"
        type: DefaultChoices = ['todo', 'thing']

    def render(self, context):

        if callable(self.add_url):
            add_url = self.add_url(self.type)
        else:
            add_url = self.add_url

        return \
            <form method="post" action={add_url}>
                <label>New {self.type}: </label><itext name="todo" />
                <button type="submit">Add</button>
            </form>

首先，让我们在不使用add_url prop 的情况下尝试，因为我们有一个默认值。

print(<TodoForm  />)

<form method="post" action="/todo/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

如果我们传递一个字符串，也应该可以工作。

print(<TodoForm add_url="/todolist/add" />)

<form method="post" action="/todolist/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

现在我们可以传递一个函数。

def make_url(type):
    return f"/{type}/add"

print(<TodoForm add_url={make_url} />)

mixt.exceptions.InvalidPropValueError: <TodoForm>.add_url:
`<function make_url at 0x7fe2ae87be18>` is not a valid value for this prop (type: <class 'function'>, expected: Union[Callable[[str], str], str])

哦？为什么？我传递了一个接受字符串作为参数并返回字符串的函数。是的，但不要忘记类型是会被检查的！所以我们必须给我们的函数添加类型。

def make_url(type: str) -> str:
    return f"/{type}/add"

print(<TodoForm add_url={make_url} />)

<form method="post" action="/todo/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

如果我们传递另一种类型，URL应该相应地更改。

print(<TodoForm add_url={make_url} type="thing" />)

<form method="post" action="/thing/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

我们甚至可以将这个函数作为我们 prop 的默认值。

from typing import Union, Callable
from mixt import DefaultChoices, Element, Required, html


def make_url(type: str) -> str:
    return f"/{type}/add"


class TodoForm(Element):

    class PropTypes:
        add_url: Union[Callable[[str], str], str] = make_url
        type: DefaultChoices = ['todo', 'thing']

    def render(self, context):

        if callable(self.add_url):
            add_url = self.add_url(self.type)
        else:
            add_url = self.add_url

        return \
            <form method="post" action={add_url}>
                <label>New {self.type}: </label><itext name="todo" />
                <button type="submit">Add</button>
            </form>

print(<TodoForm />)

<form method="post" action="/todo/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form>

继承

实现这个功能的第一种方式是从我们的TodoApp继承。但是通过继承，我们无法从父组件中删除属性（这并不是真的，我们稍后会看到），所以我们仍然默认有type属性。但是，我们不想接受除“thing”之外的其他任何内容。因此，我们可以像这样重新定义type属性

class ThingApp(TodoApp):
    class PropTypes:
        type: DefaultChoices = ['thing']

让我们使用这个组件

print(<ThingApp todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form method="post" action="/thing/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form><ul><li>foo</li></ul></div>

如果我们尝试为type属性传递“todo”，它将不起作用

print(<ThingApp todos={[TodoObject("foo")]} type="todo" />)

mixt.exceptions.InvalidPropChoiceError:
<ThingApp>.type: `todo` is not a valid choice for this prop (must be in ['thing'])

但是，仍然，能够传递类型很奇怪。

父组件

让我们尝试另一种方法：父组件。一个只做与子组件相关的事情并返回它们的组件。我们在这里想要的，是一个返回带有 type 属性强制为“thing”的 TodoApp 组件的组件。

让我们试试这个

class ThingApp(Element):
    class PropTypes:
        todos: Required[List[TodoObject]]

    def render(self, context):
        return <TodoApp todos={self.todos} type="thing" />

print(<ThingApp todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form method="post" action="/thing/add"><label>New todo: </label><input type="text" name="todo" /><button type="submit">Add</button></form><ul><li>foo</li></ul></div>

它工作了，这次，我们不能传递 type 属性

print(<ThingApp todos={[TodoObject("foo")]} />)

mixt.exceptions.InvalidPropNameError: <ThingApp>.type: is not an allowed prop

PropTypes 的 DRY原则

注意我们不得不在 TodoApp 和 TodoThing 中定义 todos 属性的类型。

有许多处理这种类型的方法。

第一种方法是在 ThingApp 中忽略类型，因为它将在 TodoApp 中进行检查。所以我们将使用类型 Any。

from typing import Any

#...

class ThingApp(Element):
    class PropTypes:
        todos: Any

 #...

让我们用一个有效的 todos 列表试一下

print(<ThingApp todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form>...</form><ul><li>foo</li></ul></div>

但如果我们传递其他东西呢？

print(<ThingApp todos="foo, bar" />)

mixt.exceptions.InvalidPropValueError:
<TodoApp>.todos: `foo, bar` is not a valid value for this prop (type: <class 'str'>, expected: List[TodoObject])

它按预期工作，但错误是在 TodoApp 层级报告的，这是完全正常的。

另一种方法是在更高层级定义类型

TodoObjects = Required[List[TodoObject]]

class TodoApp(Element):
    class PropTypes:
        todos: TodoObjects
 # ...

class ThingApp(Element):
    class PropTypes:
        todos: TodoObjects
 # ...

现在如果我们传递其他东西，错误将在正确的层级报告

print(<ThingApp todos="foo, bar" />)

mixt.exceptions.InvalidPropValueError:
<TodoThing>.todos: `foo, bar` is not a valid value for this prop (type: <class 'str'>, expected: List[TodoObject])

但如果你不能或不想这样做，你可以在 TodoApp 中保留类型定义，并使用组件的 prop_type 类方法来获取属性的类型

class ThingApp(Element):
    class PropTypes:
        todos: TodoApp.prop_type("todos")
 # ...

但对于 ThingApp 或 TodoApp 报错真的很重要吗？因为最终，确实是 TodoApp 必须进行检查。

所以这应该是一个更通用的做法...

函数

我们之前看到，一个组件可以是一个单独的函数来渲染组件。它只需返回一个组件，一个 HTML 标签。与类组件的不同之处在于，没有 PropTypes，所以没有验证。但是...这正是我们所需要的。

我们希望我们的 ThingApp 接受一些属性（例如 todos 属性），并返回一个具有特定 type 属性的 TodoApp。

所以我们可以这样做

def ThingApp(todos):
    return <TodoApp type="thing" todos={todos} />

这里我们可以看到，不能将 type 传递给 ThingsApp，这不是一个有效的参数。

让我们试试

print(<ThingApp todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form>...</form><ul><li>foo</li></ul></div>

这里只有一个属性要传递，所以很容易。但想象一下，如果我们有很多属性。我们可以使用 {**props} 语法

def ThingApp(**props):
    return <TodoApp type="thing" {**props} />

并且你可以用更少的字符来做（如果这很重要的话）

ThingApp = lambda **props: <TodoApp type="thing" {**props} />

这两个函数行为完全相同。

你不能传递一个 type 属性，因为这会是一个 Python 错误，因为它将被两次传递给 TodoApp。

print(<ThingApp todos={[TodoObject("foo")]} type="thing" />)

TypeError: BaseMetaclass object got multiple values for keyword argument 'type'

(是的，它提到了 BaseMetaclass，这是创建我们组件类的元类)

其他任何错误的属性都将由 TodoApp 验证

print(<ThingApp todos={[TodoObject("foo")]} foo="bar" />)

mixt.exceptions.InvalidPropNameError: <TodoApp>.foo: is not an allowed prop

考虑到这一点，我们可能已经创建了一个通用函数，该函数可以强制接受 type 属性的任何组件的类型

Thingify = lambda component, **props: <component type="thing" {**props} />

print(<Thingify component={TodoApp} todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form>...</form><ul><li>foo</li></ul></div>

渲染的组件是 TodoApp，type 属性是“thing”，其他属性（这里仅指 todos）都正确传递。

高阶组件

现在将这个概念扩展到更通用的情况：“高阶组件”。在 React 中，“高阶组件” 是“一个接收组件并返回新组件的函数。”

想法是

EnhancedComponent = higherOrderComponent(WrappedComponent)

一种经典的方法是返回一个新的组件类

def higherOrderComponent(WrappedComponent):

    class HOC(Element):
        __display_name__ = f"higherOrderComponent({WrappedComponent.__display_name__})"

        class PropTypes(WrappedComponent.PropTypes):
            pass

        def render(self, context):
            return <WrappedComponent {**self.props}>{self.childre()}</WrappedComponent>

    return HOC

注意我们如何将 PropTypes 类设置为从包装组件继承，以及如何将所有属性传递给包装组件，包括子组件。返回的组件将接受与包装组件相同的属性，具有相同的类型。

还要注意 __display_name__。它将在异常中使用，以便您知道引发异常的组件。在这里，没有强制设置，它将被设置为 HOC，这没有帮助。相反，我们表明这是一个传入组件的转换版本。

这里是一个没有任何有用功能的函数。

在我们的例子中，我们可以这样做

def thingify(WrappedComponent):

    class HOC(Element):
        __display_name__ = f"thingify({WrappedComponent.__display_name__})"

        class PropTypes(WrappedComponent.PropTypes):
            __exclude__ = {'type'}

        def render(self, context):
            return <WrappedComponent type="thing" {**self.props}>{self.children()}</WrappedComponent>

    return HOC

这里有两个重要的事情

• 注意我们如何使用 __exclude__ = {'type'} 从 WrappedComponent.PropTypes 继承的属性中删除 type 属性。因此，返回的组件将期望与包装组件相同的属性，除了 type。

• 我们在渲染的包装组件中添加了 {self.children()}，因为即使我们实际上知道我们将要包装的组件 TodoApp 不接受子组件（它可能接受但对其没有作用），我们也不能预先说它始终是这样，而且这个高阶组件不会用来包装除了 TodoApp 以外的组件。所以最好总是这样做。

现在我们可以创建我们的 ThingApp

ThingApp = thingify(TodoApp)

并使用它

print(<ThingApp todos={[TodoObject("foo")]} />)

<div><h1>The "thing" list</h1><form>...</form><ul><li>foo</li></ul></div>

如果我们尝试传递类型

print(<ThingApp todos={[TodoObject("foo")]} type="thing" />)

mixt.exceptions.InvalidPropNameError: <thingify(TodoApp)>.type: is not an allowed prop

所以如计划，我们不能传递类型。并且注意 __display_name__ 的使用。

让我们思考一下它的强大。

假设我们想让 TodoApp 接受一个 TodoObject 列表。但我们想从“源”获取它们。

我们甚至可以直接以通用方式编写这个新的高阶组件

def from_data_source(WrappedComponent, prop_name, get_source):

    class HOC(Element):
        __display_name__ = f"from_data_source({WrappedComponent.__display_name__})"

        class PropTypes(WrappedComponent.PropTypes):
            __exclude__ = {prop_name}

        def render(self, context):
            props = self.props.copy()
            props[prop_name] = get_source(props, context)
            return <WrappedComponent {**props}>{self.children()}</WrappedComponent>

    return HOC

这次，函数 from_data_source 除了 WrappedComponent 之外还接受两个参数

• prop_name：这是要填充数据的包装组件属性的名称

• get_source：这是一个将被调用来获取数据的函数

看看我们如何从包装组件继承了 PropTypes 并排除了 prop_name。因此，我们（并且不能）将数据传递给我们的新组件。

然后在 render 中，我们设置一个属性，将 get_source 调用的结果传递给 WrappedComponent。

所以让我们编写一个非常简单的函数（这可能是具有缓存、过滤等复杂性的函数），它接受属性和上下文，并返回一些数据

def get_todos(props, context):
    # here it could be a call to a database
    return [
        TodoObject("fooooo"),
        TodoObject("baaaar"),
    ]

我们可以组合我们的组件

SourcedTodoApp = from_data_source(TodoApp, 'todos', get_todos)
ThingApp = thingify(SourcedTodoApp)

并运行它

print(<ThingApp />)

<div><h1>The "thing" list</h1><form>...</form><ul><li>fooooo</li><li>baaaar</li></ul></div>

它按预期工作，并且仅在组件需要渲染时才会获取数据。

收集器

mixt 提供了一种“收集”渲染部分内容以便将其放在其他地方的方法。我们有两个简单的收集器可供使用，用作组件：JSCollector 和 CSSCollector。

这些组件收集其子树的部分内容。

from mixt import JSCollector

print(
    <JSCollector render_position="after">
        <UserContext authenticated_user_id=1>
            <ThingApp />
        </User>
    </JSCollector>
)

class TodoForm(Element):
    # ...

    def render(self, context):

        if callable(self.add_url):
            add_url = self.add_url(self.type)
        else:
            add_url = self.add_url

        return \
                <JSCollector.Collect>{self.render_javascript(context)}</JSCollector.Collect>
                <form method="post" action={add_url} onsubmit="return on_todo_add_submit(this);">
                    <label>New {self.type}: </label><itext name="todo" />
                    <button type="submit">Add</button>
                </form>
            </Fragment>

class TodoList(Element):
    # ...

    def render(self, context):
        return \
            <Fragment>
                <JSCollector.Collect>{self.render_javascript(context)}</JSCollector.Collect>
                <ul id="todo-items">{[<Todo todo={todo} /> for todo in self.todos]}</ul>
            </Fragment>

print(
    <JSCollector render_position="after">
        <UserContext authenticated_user_id=1>
            <ThingApp />
        </User>
    </JSCollector>
)

<div>
    <h1>The "thing" list</h1>
    <form method="post" action="/thing/add" onsubmit="return on_todo_add_submit(this);">
        <label>New thing: </label>
        <input type="text" name="todo" />
        <button type="submit">Add</button>
    </form>
    <ul id="todo-items">
        <li>1-1</li>
        <li>1-2</li>
    </ul>
</div>
<script type="text/javascript">
    function on_todo_add_submit(form) {
        var text = form.todo.value;
        add_todo(text);
    }

    TODO_TEMPLATE = "<li>placeholder</li>";

    function add_todo(text) {
        var html = TODO_TEMPLATE.replace("placeholder", text);
        var ul = document.querySelector('#todo-items');
        ul.innerHTML = html + ul.innerHTML;
    }
</script>

from mixt import Ref

js_ref = Ref()

<JSCollector ref={js_ref} >...</JSCollector>

js_collector = js_ref.current

return str(
    <html>
        <head>
        </head>
        <body>
            <JSCollector ref={js_ref} >
                <UserContext authenticated_user_id=1>
                    <ThingApp />
                </UserContext>
            </JSCollector>
        </body>
    </html>
)

<html>

<head></head>

<body>
    <div>
        <h1>The "thing" list</h1>
        <form method="post" action="/thing/add" onsubmit="return on_todo_add_submit(this);">
            <label>New thing: </label>
            <input type="text" name="todo" />
            <button type="submit">Add</button>
        </form>
        <ul id="todo-items">
            <li>1-1</li>
            <li>1-2</li>
        </ul>
    </div>
</body>

</html>

# ...
<head>
    {js_ref.current.render_collected()}
</head>
# ...

AttributeError: 'NoneType' object has no attribute 'render_collected'

# ...
<head>
    {lambda: js_ref.current.render_collected()}
</head>
# ...

<html>

<head>
    <script type="text/javascript">
        function on_todo_add_submit(form) {
            var text = form.todo.value;
            add_todo(text);
        }

        TODO_TEMPLATE = "<li>placeholder</li>";

        function add_todo(text) {
            var html = TODO_TEMPLATE.replace("placeholder", text);
            var ul = document.querySelector('#todo-items');
            ul.innerHTML = html + ul.innerHTML;
        }
    </script>
</head>

<body>
    <div>
        <h1>The "thing" list</h1>
        <form method="post" action="/thing/add" onsubmit="return on_todo_add_submit(this);">
            <label>New thing: </label>
            <input type="text" name="todo" />
            <button type="submit">Add</button>
        </form>
        <ul id="todo-items">
            <li>1-1</li>
            <li>1-2</li>
        </ul>
    </div>
</body>

</html>