yaka-json-to-react-code
Advanced tools
npm install yaka-json-to-react-code --save
or
yarn add yaka-json-to-react-code
demo.json
{
"name": "lalala",
"yakaConfig": {
"name": "home",
"init": {
"formValue": {
"bumen": "2",
"name": "1000",
"checkbox": [
"Pear"
],
"numbeer": "demo",
"switch": false
},
"state": {
"demo": "ddddddd",
"arr": [
{
"label": "1111"
}
]
},
"functions": {
"getItem": {
"type": "yakaFetch",
"definition": {
"headers": {
"aa": "@data",
"state": "$demo",
"string": "string"
},
"type": "restful",
"url": "http://xingyang.com/re/localdns",
"params": {
"demo": "$arr[0].label",
"test": "#name"
},
"streams": {
"$bumen.options": {
"path": "data.org",
"alias": {
"label": "label",
"value": "value"
}
},
"$test.options": "data.org"
}
}
},
"titleChange": {
"type": "stream",
"definition": {
"$title": "target.value",
"#sename": "target.value"
}
},
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
},
"watch": {
"title": {
"run": "testWatch"
},
"subTitle": {
"run": "log"
}
},
"event": {
"demo": {
"onCLick": "#buttonCLick"
}
}
},
"layout": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
"text": "$dadwada",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
},
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "Card",
"props": {
"title": "日志系统服务器采购申请"
},
"subs": [
{
"name": "form",
"ele": "Form",
"props": {
"colWidth": 8,
"labelCol": 8,
"wrapperCol": 16,
"gutter": 30
},
"subs": [
{
"name": "name",
"label": "申请人",
"ele": "Input",
"props": {
"onChange": "*titleChange"
},
"rules": [
{
"required": true,
"message": "请填写申请人"
}
]
},
{
"name": "sename",
"label": "受控表单",
"ele": "Input",
"props": {
"onChange": "*log"
}
},
{
"name": "bumen",
"label": "申请需求部门",
"ele": "Select",
"props": {
"options": "$bumen.options",
"onChange": "*getItem"
}
},
{
"name": "date",
"label": "需求交付时间",
"ele": "DatePicker"
},
{
"name": "numbeer",
"label": "数量",
"ele": "Input"
},
{
"name": "radio",
"label": "单选",
"ele": "Radio",
"props": {
"mode": "dadwa",
"moded": 1000,
"modesdaw": true,
"options": [
{
"label": "Apple",
"value": "Apple"
},
{
"label": "Pear",
"value": "Pear"
},
{
"label": "Orange",
"value": "Orange",
"disabled": false
}
]
}
},
{
"name": "checkbox",
"label": "多选",
"ele": "Checkbox",
"props": {
"options": [
{
"label": "Apple",
"value": "Apple"
},
{
"label": "Pear",
"value": "Pear"
},
{
"label": "Orange",
"value": "Orange",
"disabled": false
}
]
}
},
{
"name": "time",
"label": "需求具体时间",
"ele": "TimePicker"
},
{
"name": "switch",
"label": "开关",
"ele": "Switch"
}
]
}
]
}
]
},
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "Card",
"props": {
"title": "@data",
"style": {
"padding": 10
}
},
"subs": [
{
"ele": "Table",
"props": {
"dataSource": [
{
"key": "1",
"name": "胡彦斌",
"age": 32,
"address": "西湖区湖底公园1号"
},
{
"key": "2",
"name": "胡彦祖",
"age": 42,
"address": "西湖区湖底公园1号"
}
],
"columns": [
{
"title": "姓名",
"dataIndex": "name"
},
{
"title": "年龄",
"dataIndex": "age"
},
{
"title": "住址",
"dataIndex": "address"
}
]
}
}
]
}
]
},
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "Card",
"props": {
"title": "@data"
},
"subs": [
{
"name": "edit",
"ele": "Editor",
"rules": [
{
"required": true,
"message": "请填写申请人"
}
]
}
]
}
]
},
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "Card",
"props": {
"title": "申请资源的详细信息",
"style": {
"padding": 10
}
},
"subs": [
{
"name": "editTable",
"ele": "EditTable",
"props": {
"value": [
{
"serverType": "",
"serverNum": 1,
"serverTarget": "1",
"serverUseNode": 1,
"os": true,
"other": 1,
"key": 1
}
],
"columns": [
{
"title": "服务器机型",
"ele": "Input",
"name": "serverType",
"rules": [
{
"required": true,
"message": "请填写InputNumber"
}
]
},
{
"title": "服务器数量",
"ele": "InputNumber",
"name": "serverNum",
"rules": [
{
"required": true,
"message": "请填写服务器数量"
}
]
},
{
"title": "服务器用途",
"name": "serverTarget",
"ele": "Select",
"props": {
"options": "$bumen.options"
}
},
{
"title": "服务器使用节点",
"ele": "Input",
"name": "serverUseNode"
},
{
"title": "操作系统要求",
"ele": "Switch",
"name": "os"
},
{
"title": "其他需求",
"ele": "Input",
"name": "other"
}
]
}
}
]
}
]
}
],
"mounted": {
"run": {
"demo": {
"param": 10000
},
"getItem": {},
"log": {
"param": "dadwa"
}
}
}
},
"functionTemplates": {
"shit": "(data, api) => {\n const { getState, formValueSettingFunction, stateValueSettingFunction } = api\n formValueSettingFunction({ sename: \"测试数据\" })\n stateValueSettingFunction({\n title: {\n value: \"测试数据\"\n }\n })\n }",
"demo": "(data, api) => {\n const { getState, formValueSettingFunction, stateValueSettingFunction } = api\n formValueSettingFunction({ sename: \"测试数据\" })\n stateValueSettingFunction({\n title: {\n value: \"测试数据\"\n }\n })\n }"
},
"mountFunctions": {
"shit": "(data, api) => {\n const { getState, formValueSettingFunction, stateValueSettingFunction } = api\n formValueSettingFunction({ sename: \"测试数据\" })\n stateValueSettingFunction({\n title: {\n value: \"测试数据\"\n }\n })\n }",
"demo": "(data, api) => {\n const { getState, formValueSettingFunction, stateValueSettingFunction } = api\n formValueSettingFunction({ sename: \"测试数据\" })\n stateValueSettingFunction({\n title: {\n value: \"测试数据\"\n }\n })\n }"
}
}
使用
import yakaJsonToReactCode from 'yaka-json-to-react-code'
import demo from './../demo.json';
const data = yakaJsonToReactCode(demo)
console.log(data.getData());
转换后的jsx文件
import React, { Component } from "react";
import {
Row,
Card,
Form,
Input,
Select,
DatePicker,
Radio,
Checkbox,
TimePicker,
Switch,
Card,
Table,
Card,
Editor,
Card,
EditTable
} from "igroot";
import { shit, demo } from "lalala_mountFunction.js";
import { shit, demo } from "lalala_functionTemplate.js";
class lalala extends Component {
constructor() {
super();
this.state = { demo: "ddddddd", arr: [{ label: "1111" }] };
this.shit = shit.bind(this);
this.demo = demo.bind(this);
}
componentDidMount() {
this.initFormValue();
this.runMountedFunc();
}
initFormValue = () => {
const { setFieldsValue } = this.props.form;
setFieldsValue({
bumen: "2",
name: "1000",
checkbox: ["Pear"],
numbeer: "demo",
switch: false
});
};
runMountedFunc = () => {
this.demo({ param: 10000 });
this.getItem({});
this.log({ param: "dadwa" });
};
render() {
const { dadwada, bumen } = this.state;
return (
<div>
<Row>
<h1 style={{ textAlign: "center" }}>{dadwada}</h1>
</Row>
<Row>
<Card title="日志系统服务器采购申请">
<Form colWidth={8} labelCol={8} wrapperCol={16} gutter={30}>
<Input onChange={this.titleChange} />
<Input onChange={this.log} />
<Select options={bumen.options} onChange={this.getItem} />
<DatePicker />
<Input />
<Radio
mode="dadwa"
moded={1000}
modesdaw={true}
options={[
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange", disabled: false }
]}
/>
<Checkbox
options={[
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange", disabled: false }
]}
/>
<TimePicker />
<Switch />
</Form>
</Card>
</Row>
<Row>
<Card title={data} style={{ padding: 10 }}>
<Table
dataSource={[
{
key: "1",
name: "胡彦斌",
age: 32,
address: "西湖区湖底公园1号"
},
{
key: "2",
name: "胡彦祖",
age: 42,
address: "西湖区湖底公园1号"
}
]}
columns={[
{ title: "姓名", dataIndex: "name" },
{ title: "年龄", dataIndex: "age" },
{ title: "住址", dataIndex: "address" }
]}
/>
</Card>
</Row>
<Row>
<Card title={data}>
<Editor />
</Card>
</Row>
<Row>
<Card title="申请资源的详细信息" style={{ padding: 10 }}>
<EditTable
value={[
{
serverType: "",
serverNum: 1,
serverTarget: "1",
serverUseNode: 1,
os: true,
other: 1,
key: 1
}
]}
columns={[
{
title: "服务器机型",
ele: "Input",
name: "serverType",
rules: [{ required: true, message: "请填写InputNumber" }]
},
{
title: "服务器数量",
ele: "InputNumber",
name: "serverNum",
rules: [{ required: true, message: "请填写服务器数量" }]
},
{
title: "服务器用途",
name: "serverTarget",
ele: "Select",
props: { options: "$bumen.options" }
},
{
title: "服务器使用节点",
ele: "Input",
name: "serverUseNode"
},
{ title: "操作系统要求", ele: "Switch", name: "os" },
{ title: "其他需求", ele: "Input", name: "other" }
]}
/>
</Card>
</Row>
</div>
);
}
}
export default lalala;
FAQs
a engine of analysis json to react
The npm package yaka-json-to-react-code receives a total of 2 weekly downloads. As such, yaka-json-to-react-code popularity was classified as not popular.
We found that yaka-json-to-react-code demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Company News
Socket is joining the OpenJS Security Stewardship Program to fund Node.js vulnerability research, maintainer remediation, and security releases.
Security News
Two compromised GitHub Actions were re-enabled with malicious tags intact, exposing thousands of downstream repositories to Mini Shai-Hulud.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.