从JSON生成React表单字段 [英] Generate React form fields from JSON

问题描述

我正在尝试从JSON配置生成表单.我正在解析JSON，并使用地图函数来生成实质性的UI TextField组件.但是问题在于生成的组件无法渲染，而是整个JS代码出现在屏幕上.不知道为什么.

i am trying to generate a form from JSON config. I am parsing the JSON and using map functions to generate material UI TextField components. But issue is that the generated components do not get rendered, instead the whole JS code appears on screen. Not sure why.

这是我在2个文件中的代码:

here is my code in 2 files:

FormConfig.js:

FormConfig.js:

  "Form1": {   
    "fields": [
      {
        uiElement: "TextField",
        id: '"standard-name"',
        name: "'asdada'",
        className: "{classes.textField}",
        value: "{this.state.name}",
        onChange: '{this.handleChange("name")}',
        required: true,
        margin: '"normal"'
      },
      {
        uiElement: "TextField",
        id: '"standard-uncontrolled"',
        name: '"asda"',
        label: '"Required"',
        className: '"{classes.textField}"',
        value: '"asd"',
        onChange: "{}",
        required: true,
        margin: '"normal"'
      }
   ]
  },
  "OtherForm":
  {
      "fields": [{}, {}]
  }
}

const getForm = formName => {
  return FormConfig[formName].fields.map(field => `<${field.uiElement} `+
    Object.keys(field).filter(k => k !== 'uiElement')
      .map(k => {
        return k + "=" + field[k];
      })
      .join(" ") + `/>`
  )
}

export default getForm;

TestForm.js

TestForm.js

class TextFields extends React.Component {
  state = {
    name: 'Cat in the Hat',
    age: '',
    multiline: 'Controlled',
    currency: 'EUR',
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">

        {
            getForm("Form1")
        }

        <TextField
          required
          id="standard-required"
          label="Required"
          defaultValue="Hello World"
          className={classes.textField}
          margin="normal"
        />

我期望对 getForm()的调用会呈现我的字段，但是相反，它会在网页上吐出来.我在做错什么吗?

I was expecting that the call to getForm() would have rendered my fields, but instead it spits out this on the web page. Am I doing something wrong?

<TextField id="standard-name" name='asdada' className={classes.textField} value={this.state.name} onChange={this.handleChange("name")} required=true margin="normal"/><TextField id="standard-uncontrolled" name="asda" label="Required" className="{classes.textField}" value="asd" onChange={} required=true margin="normal"/><TextField id="standard-read-only-input" name="asd" label="Read Only" className={classes.textField} value="asd" onChange={} required=false margin="normal" InputProps={{readOnly: true}}/><TextField id="standard-dense" name="w3rg" label="Dense" className={classNames(classes.textField, classes.dense)} value="sdas" onChange={} required=false margin="dense"/>

推荐答案

尝试返回映射时的组件:

try to return the component at mapping:

const getForm = formName => {
  return FormConfig[formName].fields.map(field => evalComponent(field))
}

const evalComponent = field => {
    let { uiElement, ...props } = field
    switch(uiElement) {
        case 'TextField':
            return <TextField {...props}/>
        default:
            return false
    }
}

这篇关于从JSON生成React表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！