javascript - 在 ReactJS 中从 json 字符串动态创建 DOM

Question

我有以下 JSON 字符串，我需要从中动态创建以下形式的 DOM:

    {
        "formData": [{
            "inputType": "text",
            "type": "string",
            "min": 10,
            "label": "Enter Name:",
            "objectId": "test1"
        }],
        "gridLayout": {
            "rows": [
                {
                    "column": [
                        {
                            "width": "4",
                            "id": "test1"
                        }
                    ]
                }
            ]
        }
    }

从 gridLayout 对象中，我希望创建引导样式网格。例如，JSON 的 "rows" 的第一个 row 对象在 columns 对象中有 1 列，宽度为 4。因此，布局该行应该是

<div class="row">
    <div class="col-md-4" id="test1">

    </div>
</div>

稍后，使用 JSON 的 formData 对象，TextBox 组件应附加到网格布局，如下所示:

<div class="row">
    <div class="col-md-4" id="test1">
        <TextBox />
    </div>
</div>

现在，我已经编写了代码来显示 TextBox 组件，因为它没有网格布局，如下所示。

Form.jsx:

class Form extends React.Component {
getComponent = (formObj, index) => {
    let returnString;
    if (formObj.inputType === 'text') {
        returnString = (<TextBox key={index} />);
    }

    return returnString;
}


render() {
    let formData = JSON.parse(this.getData()).formData;
    return (
        <React.Fragment> {formData.map((o, index) => this.getComponent(o, index))} </React.Fragment>
    );
}
}

现在，我如何动态创建网格布局并在其中插入 TextBox 组件？

Answer 1

可以通过组合使用数组方法来实现解决方案。使用Array#map根据需要渲染您的 gridLayout div。使用Array#find从 formData 中查找正确的 TextBox 的 props。

我简化了 formData，但添加了更多行和列以便为您提供完整的图片。

const data = {
  "formData": [{
    "label": "Enter Name:",
    "objectId": "test1"
  }, {
    "label": "Enter Address:",
    "objectId": "test2"
  }, {
    "label": "Enter Number:",
    "objectId": "test3"
  }, {
    "label": "Enter Something:",
    "objectId": "test4"
  }],
  "gridLayout": {
    "rows": [{
        "column": [{
          "width": "4",
          "id": "test1"
        }, {
          "width": "4",
          "id": "test2"
        }]
      },
      {
        "column": [{
          "width": "6",
          "id": "test3"
        }, {
          "width": "6",
          "id": "test4"
        }]
      }
    ]
  }
}

const TextBox = ({ label }) => (
  <React.Fragment>
    <label>{label}</label>
  </React.Fragment>
);

const Form = ({ data: { formData, gridLayout } }) => {
  return gridLayout.rows.map(row => {
    return (
      <div class="row">
        {row.column.map(col => {
          const textBoxProps = formData.find(data => data.objectId === col.id);
          // REPLACE col- with col-md-. Done here to demonstrate layout in small snippet output area
          return (
            <div className={`col-${col.width} borderedCol`}>
              <TextBox {...textBoxProps} />
            </div>
          );
        })}
      </div>
    );
  });
};

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

/* ONLY for demo purposes */
.borderedCol {
  border: 1px solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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="app"></div>