IT技术 - 从 JSON 生成 React 表单字段 - 吾爱随笔录

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

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

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;

测试表格.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()会呈现我的字段，但它却在网页上吐出这个。难道我做错了什么？

<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"/>