python笔记 Pynecone初识组件

Abadbeginning
389 阅读2分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情”

0 环境

  • 编辑器：pycharm或者vscode
  • 系统版本：windows10
  • 编辑器版本：最新
  • 浏览器：谷歌
  • node版本：NodeJS 12.22.0+
  • Python版本：3.7+
  • node官网：nodejs.org/en/

1 文档

官方文档

官方组件的介绍

2 了解

如下图翻译所示： 几个重点：组件是可以拆分、复用的，解释了react和Pynecone两者之间的关系，之后的组件的创建和关键字配置，以及之后的内容没有概念，不好理解也没关系。看下面第二张图。 image.png

结合children and props的具体解释，确实是一个是元组，另一个是字典。 image.png

对子文本进行字体、颜色的渲染。复制代码到def index() return里pc.vstack那个括号里，若是后面跟着代码，别忘了加逗号分隔。 image.png

对照文档看，来个嵌套的写法： 定义了about函数，里面整了个居中进度条，并且把这个about函数绑定到了/about路由上。

def about():
    return pc.center(
        pc.hstack(
            pc.circular_progress(
                pc.circular_progress_label("50", color="green"),
                value=50,
            ),
            pc.circular_progress(
                pc.circular_progress_label(
                    "∞", color="rgb(107,99,246)"
                ),
                is_indeterminate=True,
            ),
            pc.text("About Page")
        ),
    )

# Add state and page to the app.
app=pc.App(state=State)
app.add_page(index)
app.add_page(about, route="/about")
app.compile()

image.png

在项目的根目录，pc.run运行代码，一般没改dev端口的话，是3000，网页上输入http://localhost:3000/about，看效果。

image.png

3 Props

它的定义是：Props是组件函数的关键字参数，可以这么说，你把自己想象成发型师，Props就是各种发型工具、配料。。。

文档翻到如下图所在位置： image.png

对照着来看具体的代码，如下： 先PropExampleState类继承了State(注意不能是pc.State，如果你就想这么干，请在pc.App(state=xxxx)，请在这里该它，不然会报错，找不到它)，然后在里面定义变量和方法，在testprops函数下pc.badge里调用它。

class State(pc.State):
    """The app state."""

    pass

class PropExampleState(State):
    text: str = "Hello World"
    color: str = "red"

    def flip_color(self):
        if self.color == "red":
            self.color = "blue"
        else:
            self.color = "red"

def testprops():
    return pc.badge(
            PropExampleState.text,
            color_scheme=PropExampleState.color,
            on_click=PropExampleState.flip_color,
            font_size="1.5em",
            _hover={
                "cursor": "pointer",
            },
        )

# Add state and page to the app.
app=pc.App(state=State)
app.add_page(index)
app.add_page(about, route="/about")
app.add_page(testprops, route="/testprops")
app.compile()

4 总结

简单的了解下Children和Props，基本的使用路由，定义组件，运行它，查看效果，注意：还有在用Props的时候，用到了state的话，请检查好绑定关系，不然会报错，也是很容易忽略的地方。还有就是Props组件下的关键字，比如给该text组件的文本内容，精心装饰一下它的样式或者说你喜欢的Styling风格，并且用来默认它样式啥的，在配合State，就可以通过修改State，动态改变该文本的样式。

avatar
文章
阅读
粉丝