生成表单的react组件中的递归。

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盒。否则，它们的行为就会像本地输入一样。但这不是这个问题的一部分。