生成表单的反应组件中的递归

Question

你好！

我目前正在尝试制作一个基于提供的对象生成的表单，这似乎对我扔给它的任何东西都有效。

也就是说，直到我找到一个嵌套对象。

---

问题：

一旦我达到了 if 条件 (typeof value === "object") 我想要一个隐藏的输入（这可行）。
然后我想进入我刚刚识别的那个对象，进入它可能包含的所有子对象，并按照与初始运行相同的标准生成输入。

function GenericForm(props: any) {
  var object = props.object;

  return (
    <div>
      <form>
        {Object.entries(object).map(([property, value]) => {
          let type: string = "";
          if (typeof value === "string") {
            type = "text";
          } else if (typeof value === "number") {
            type = "number";
          } else if (typeof value === "boolean") {
            type = "checkbox";
          } else if (value instanceof Date) {
            type = "date";
          } else if (typeof value === "object") {
            type = "hidden";
          }

          return [
            <label property={property} htmlFor={property}>
              {property}
            </label>,
            <input
              type={type}
              id={property}
              name={property}
              defaultValue={value as string}
              onChange={(newVal) => {
                object[property] = newVal.target.value;
              }}
            />,
          ];
        })}
      </form>
    </div>
  );
}
export default GenericForm;

我知道这很可能利用了某种递归，虽然我尝试使用递归来解决它，但我无法解决它。
此处粘贴的代码来自我尝试递归之前的代码，以便在我出错的地方有一张“干净的床单”。

编辑 1 - 添加对象结构信息

传递的对象应该是完全通用的，并允许将任何结构的对象传递给组件，目前它应该只评估属性的类型并从中创建一个输入元素。

我正在传递的当前对象之一具有以下 JSON 架构

{
    "id": "XYZ1",
    "type": "twilio-api",
    "sid": "someSID",
    "from": "+phonenumberhere",
    "name": "TWILIO SMS",
    "credentials": {
        "token": "someapitoken"
    }
}

上面的对象当前呈现如下：

Answer 1

假设你有一个Input 组件：

  function Input = ({ name, type, value }) => {
    // most of your code can fit here
    return <input name={name} type={type} value={value} />
  }

您可以使用您的代码版本，我使用上面的简化版本以使我们的讨论更容易。有了它，我们可以设计一个InputList 组件：

  function InputList = ({ object }) => {
    console.log('list', object)
    return (
      <div>
        {Object.entries(object).map(([property, value]) => {
           if (typeof value === "object") {
             return <InputList object={value} />
           } else {
             return <Input name={property} />
           }
        })}
      </div>
    )
  }

您可以看到在这个InputList 内部，再次调用了InputList，所以这就是您要查找的递归。当对象中不再有对象时，递归停止。

注意：React 需要 value 和 onChange 来驱动任何 input 框。否则，它们只会表现得像本机输入。但这不是这个问题的一部分。