javascript - 如何从 JSON 数组创建 React 组件？

Question

我想使用 React 创建一些表单组件。我知道如何使用纯 JavaScript 通过 createElement() 和此类方法来做到这一点，但不确定如何在 React 中实现这一点。

我的 JSON 数组如下所示:

[{
    "tag": "input",
    "name": "hiddenInput",
    "id": "hiddenInput",
    "type": "hidden",
    "label": "Hidden Label"
},{
    "tag": "input",
    "name": "textInput",
    "id": "textInput",
    "type": "text",
    "label": "Text Label"
}, {
    "tag": "input",
    "name": "passwordInput",
    "id": "passwordInput",
    "type": "password",
    "label": "Password Label"
}, {
    "tag": "input",
    "name": "emailInput",
    "id": "emailInput",
    "type": "email",
    "label": "Email Label"
}, {
    "tag": "input",
    "name": "phoneInput",
    "id": "phoneInput",
    "type": "text",
    "label": "Phone Label"
}, {
    "tag": "textarea",
    "name": "textarea",
    "id": "textarea",
    "label": "Textarea Label"
}, {
    "tag": "input",
    "name": "dateInput",
    "id": "dateInput",
    "type": "date",
    "label": "Date Label"
}, {
    "tag": "input",
    "name": "checkboxInput",
    "id": "checkboxInput",
    "type": "checkbox",
    "label": "Checkbox Label"
}, {
    "tag": "input",
    "name": "radioInput",
    "id": "radioInput",
    "type": "radio",
    "label": "Radio Label"
},{
    "tag": "button",
    "name": "buttonInput",
    "id": "buttonInput",
    "type": "button",
    "label": "Submit"
}];

我想要的输出类似于:

  render() {
    return (
        <Form onSubmitStart={this.props.onSubmitStart}>
          <Input
            name="hiddenInput"
            id="hiddenInput"
            type="hidden"
            label="Hidden Label"
            value={this.state.hiddenInput}
          />

          <Input
            name="textInput"
            id="textInput"
            type="text"
            label="Text Label"
          />

          <Input
            name="passwordInput"
            id="passwordInput"
            type="password"
            label="Password Label"
          />

          <Input
            name="emailInput"
            id="emailInput"
            type="email"
            label="Email Label"
          />

          <PhoneInput
            name="phoneInput"
            id="phoneInput"
            type="text"
            country={"us"}
            enableAreaCodes={true}
            onlyCountries={["us"]}
            areaCodes={{ us: ["999","888"] }}
            inputProps={{
              name: "phone",
              country: "us",
              required: true,
              autoFocus: true
            }}
            value={this.state.phone}
            onChange={this.handlePhoneInput}
          />

        <textarea 
            name="dateInput"
            id="dateInput"
            rows={this.state.rows}
            cols={this.state.cols}
            >
        </textarea>

          <Input
            name="dateInput"
            id="dateInput"
            type="date"
            label="Date Label"
            onChange={this.handleDateInput}
          />

          <Checkbox
            name="checkboxInput"
            id="checkboxInput"
            type="checkbox"
            label="Checkbox Label"
            checked={this.state.checkbox}
          />

          <Radio
            name="radioInput"
            id="radioInput"
            type="radio"
            label="Radio Label"
            value={this.state.radio}
          />

          <Button 
            name="buttonInput"
            id="buttonInput"
            type="button"
            label="Button Label"
           > Submit </Button>
        </Form>
    );
  }

我该怎么做？

文章

JSON based dynamic forms with ReactJS

How To Create React.js Components Dynamically

(谢谢!我是 React 框架的新手。)

Answer 1

您可以映射元素并为每个元素返回适当的元素:

const data = [{
    "tag": "input",
    "name": "hiddenInput",
    "id": "hiddenInput",
    "type": "hidden",
    "label": "Hidden Label"
},{
    "tag": "input",
    "name": "textInput",
    "id": "textInput",
    "type": "text",
    "label": "Text Label"
}, {
    "tag": "input",
    "name": "passwordInput",
    "id": "passwordInput",
    "type": "password",
    "label": "Password Label"
}, {
    "tag": "input",
    "name": "emailInput",
    "id": "emailInput",
    "type": "email",
    "label": "Email Label"
}, {
    "tag": "input",
    "name": "phoneInput",
    "id": "phoneInput",
    "type": "text",
    "label": "Phone Label"
}, {
    "tag": "textarea",
    "name": "textarea",
    "id": "textarea",
    "label": "Textarea Label"
}, {
    "tag": "input",
    "name": "dateInput",
    "id": "dateInput",
    "type": "date",
    "label": "Date Label"
}, {
    "tag": "input",
    "name": "checkboxInput",
    "id": "checkboxInput",
    "type": "checkbox",
    "label": "Checkbox Label"
}, {
    "tag": "input",
    "name": "radioInput",
    "id": "radioInput",
    "type": "radio",
    "label": "Radio Label"
},{
    "tag": "button",
    "name": "buttonInput",
    "id": "buttonInput",
    "type": "button",
    "label": "Submit"
}];

function Form ({data}) {
  return (
    <form>
      {data.map(({tag: Cmp, ...other}) => (
        <div key={other.id}>
          {other.label}: <Cmp {...other} />
        </div>
      ))}
    </form>
  );
}

ReactDOM.render(<Form data={data}/>, document.getElementById('demo'));

form > * {
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"/>