通过 amis 渲染页面
{renderAmis(
{
// 这里是 amis 的 Json 配置。
type: 'page',
title: '简单页面',
body: '内容'
},
{
// props...
// locale: 'en-US' // 请参考「多语言」的文档
// scopeRef: (ref: any) => (amisScoped = ref) // 功能和前面 SDK 的 amisScoped 一样
},
{
// 下面三个接口必须实现
fetcher: ({
url, // 接口地址
method, // 请求方法 get、post、put、delete
data, // 请求数据
responseType,
config, // 其他配置
headers // 请求头
}: any) => {
config = config || {};
config.withCredentials = true;
responseType && (config.responseType = responseType);
if (config.cancelExecutor) {
config.cancelToken = new (axios as any).CancelToken(
config.cancelExecutor
);
}
config.headers = headers || {};
if (method !== 'post' && method !== 'put' && method !== 'patch') {
if (data) {
config.params = data;
}
return (axios as any)[method](url, config);
} else if (data && data instanceof FormData) {
config.headers = config.headers || {};
config.headers['Content-Type'] = 'multipart/form-data';
} else if (
data &&
typeof data !== 'string' &&
!(data instanceof Blob) &&
!(data instanceof ArrayBuffer)
) {
data = JSON.stringify(data);
config.headers = config.headers || {};
config.headers['Content-Type'] = 'application/json';
}
return (axios as any)[method](url, data, config);
},
isCancel: (value: any) => (axios as any).isCancel(value),
copy: content => {
copy(content);
toast.success('内容已复制到粘贴板');
},
theme
// 后面这些接口可以不用实现
// 默认是地址跳转
// jumpTo: (
// location: string /*目标地址*/,
// action: any /* action对象*/
// ) => {
// // 用来实现页面跳转, actionType:link、url 都会进来。
// },
// updateLocation: (
// location: string /*目标地址*/,
// replace: boolean /*是replace，还是push？*/
// ) => {
// // 地址替换，跟 jumpTo 类似
// },
// getModalContainer: () => {
// // 弹窗挂载的 DOM 节点
// },
// isCurrentUrl: (
// url: string /*url地址*/,
// ) => {
// // 用来判断是否目标地址当前地址
// },
// notify: (
// type: 'error' | 'success' /**/,
// msg: string /*提示内容*/
// ) => {
// toast[type]
// ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
// : console.warn('[Notify]', type, msg);
// },
// alert,
// confirm,
// tracker: (eventTracke) => {}
}
)}
);
}
}
```
render 有三个参数，后面会详细说明这三个参数内的属性
```js
(schema, props, env) => JSX.Element;
```
### schema
即页面配置，请前往 [配置与组件](../concepts/schema) 了解
### props
一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
```jsx
() =>
renderAmis(schema, {
data: {
username: 'amis'
}
});
```
这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：
```jsx
() =>
renderAmis(
{
//其它配置
detectField: 'somekey'
},
{
somekey: {
username: 'amis'
}
}
);
```
### env
环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：
#### fetcher（必须实现）
接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：
```ts
(config: {
url; // 接口地址
method; // 请求方法 get、post、put、delete
data; // 请求数据
responseType;
config; // 其他配置
headers; // 请求头
}) => Promise