一个受react.js启发的组件，用于在google colaboratory中构建一个简单的反应式ui。
ColabComponent的Python项目详细描述
COLAB组件
一个受react.js启发的组件，用于在google colaboratory中构建一个简单的反应式ui。
为什么？
有时需要对数据执行一些手动操作。为什么不在colab中构建一个自定义桌面应用呢？
我在react框架的启发下构建了这个组件，在我看来，react框架为快速原型式开发提供了最好的工具，非常适合于自定义数据探索和数据分析工具。
怎么做？
google.colab包提供了在output中运行python函数的接口。再加上python笔记本可以在html上完全呈现，您可以使用python、html、css和javascript构建ui！
安装
在单元格中运行：
!pip3 install ColabComponent
所有必需的依赖项都安装在google提供的环境中。
如何使用？
包使用面向对象的继承，并基于基本类Component。
组件api
| property name | type | description | overridable |
|---|---|---|---|
| render | method | the basic method, where the ui and effects are defined | ☑ |
| component_did_mount | method | a hook that is called, when the component is mounted | ☑ |
| component_did_update | method | a hook that is called, when the component is updated | ☑ |
| display | method | run to display the component | ☒ |
| register_effect | method | registers a python function such that it can be used within the HTML code | ☒ |
| state | dict | holds the info about the state of the component | ☒ |
| set_state | method | the preferred way of updating the component state | ☒ |
示例
fromColabComponentimportComponentclassCounter(Component):def__init__(self):super().__init__()self.state={'number':1}self.use_add=self.register_effect('add',self.add)defrender(self):returnf''' <h1>{self.state['number']}</h1> <button onclick="{self.use_add()}">+1</button> '''defcomponent_did_mount(self):print('mounted')defcomponent_did_update(self):print('updated')defadd(self):self.set_state({'number':self.state['number']+1})Counter().display()
欢迎加入QQ群-->： 979659372
