@cherry-tomato/react

cherry-tomato 配合 react 使用的工具,使页面自动更新的框架

Usage no npm install needed!

<script type="module">
  import cherryTomatoReact from 'https://cdn.skypack.dev/@cherry-tomato/react';
</script>

README

@cherry-tomato/react

npm version

介绍

cherry-tomato 配合 react 使用的工具,使页面自动更新的框架

安装

npm install --save @cherry-tomato/react

API 目录

API 介绍

observer 监听组件 Props

绑定方法1: 作为 Component 类的装饰其,会自监听Props中传入的 Model 并响应更新

  import { Model } from '@cherry-tomato/core';
  import { observer } from '@cherry-tomato/react';

  class Item extend Model {
    ...
  }

  @observer()
  class CustomComponent extends React.Component {
    render () {
      const item = this.props.item;
      return (
        <div>{item.title}</div>
      )
    }
  }

  (
    <CustomComponent item={new Item()} />
  )

observe 监听组件属性

绑定方法2: 作为 Component 属性的装饰其,会自监听item并响应更新

  import { Model } from '@cherry-tomato/core';
  import { observer } from '@cherry-tomato/react';

  class Item extend Model {
    ...
  }

  class CustomComponent extends React.Component {
    @observe
    item = new Item();

    render () {
      const item = this.item;
      return (
        <div>{item.title}</div>
      )
    }
  }