1- // import * as React from 'react';
2- // import {
3- // render as renderAmis
4- // } from 'amis';
5- //
6- // class App extends React.Component<any, any> {
7- // render() {
8- // return (
9- // <div>
10- // <p>通过 amis 渲染页面</p>
11- // {renderAmis({
12- // // schema
13- // // 这里是 amis 的 Json 配置。
14- // type: 'page',
15- // title: '简单页面',
16- // body: '内容'
17- // }, {
18- // // props
19- // }, {
20- // // env
21- // // 这些是 amis 需要的一些接口实现
22- // // 可以参考本项目里面的 Demo 部分代码。
23- //
24- // updateLocation: (location: string/*目标地址*/, replace: boolean/*是replace，还是push？*/) => {
25- // // 用来更新地址栏
26- // },
27- //
28- // jumpTo: (location: string/*目标地址*/) => {
29- // // 页面跳转， actionType: link、url 都会进来。
30- // },
31- //
32- // fetcher: ({
33- // url,
34- // method,
35- // data,
36- // config
37- // }: {
38- // url: string/*目标地址*/,
39- // method: 'get' | 'post' | 'put' | 'delete'/*发送方式*/,
40- // data: object | void/*数据*/,
41- // config: object/*其他配置*/
42- // }) => {
43- // // 用来发送 Ajax 请求，建议使用 axios
44- // },
45- // notify: (type: 'error' | 'success'/**/, msg: string/*提示内容*/) => {
46- // // 用来提示用户
47- // },
48- // alert: (content: string/*提示信息*/) => {
49- // // 另外一种提示，可以直接用系统框
50- // },
51- // confirm: (content: string/*提示信息*/) => {
52- // // 确认框。
53- // }
54- // })
55- // }
56- // </div>
57- // );
58- // }
59- // }
60- //
61- // ReactDOM.render(<App/>, mountNode)
1+ import React from 'react' ;
2+ import {
3+ render as renderAmis
4+ } from 'amis' ;
5+
6+ import ReactDOM from 'react-dom'
7+
8+ const json = {
9+ "$schema" : "https://houtai.baidu.com/v2/schemas/page.json#" ,
10+ "type" : "page" ,
11+ "title" : "这是标题部分" ,
12+ "subTitle" : "这是子标题" ,
13+ "remark" : "这是小提示信息" ,
14+ "aside" : "这是侧边栏部分" ,
15+ "body" : "这是内容区" ,
16+ "toolbar" : "这是工具栏部分"
17+ }
18+
19+ class App extends React . Component < any , any > {
20+ render ( ) {
21+ return ( < div >
22+ { renderAmis ( json , { } , { } ) }
23+ </ div > ) ;
24+ }
25+ }
26+
27+ ReactDOM . render ( < App /> , document . getElementById ( "root" ) )
0 commit comments