javascript - Reactjs-从数据集构建表单，FormElement不返回到render函数

我正在基于构造函数中的状态构建来动态构建表单。我已经成功构建了外部html，但是内部表单html没有呈现。某人指出我在这里搞错了什么？

class Forms extends Component {
    constructor(props) {
        super(props);
        this.state = {
            enrollment: {
                class: "form-style",
                fieldsets: [{
                    id: "1",
                    title: "Company Enrollment Form",
                    formElements: [{
                        label: "Company Name:",
                        element: "input",
                        type: "text",
                        class: "",
                        name: "cName",
                        placeholder: "Your Company's Name *",
                        required: true,
                        disabled: false
                    }, {
                        label: "Company Type:",
                        element: "select",
                        type: "populateDDL",
                        class: "",
                        name: "sltCompanyType",
                        placeholder: "",
                        required: true,
                        disabled: false
                    }]
                }]
            }
        }
    }

    render() {
        let Content = null;
        if (this.props.type === "enrollment") {
            Content = <EnrollmentForm state={this.state.enrollment} />
        } else if (this.props.type === "contact") {
            Content = <ContactUsForm />
        } else {
            Content = <fourOhFour />
        }
        return (
            <div className="container formContent">
                {Content}
            </div>
        );
    }
};

function EnrollmentForm(form) {
    function renderFieldsets(fieldsets) {
        if (fieldsets.length > 0) {
            return fieldsets.map((fieldset, index) => (
                <Fieldset key={index} set={fieldset} />
            ));
        }
        else return [];
    }
    function renderFormElements(formElements) {
        if (formElements.length > 0) {
            return formElements.map((formElement, i) => (
                <FormElement key={i} set={formElement} />
            ));
        }
        else return [];
    }
    const FormElement = (props, index) => {
        console.log(props);
        /* ^^^ NOT APPEARING/LOGGING IN THE CONSOLE ^^^ */
        if (props.tag === "input") {
            return (
                <input key={index} name={props.name} />
            );
        }else if (props.tag === "select") {
            return (
                <select key={index} />
            );
        }
    };
    const Fieldset = (props, index) => {
        const elements = renderFormElements(props.set.formElements);
        return (
            <fieldset key={index}>
                <legend>
                    <span className="number fa fa-address-card"></span>
                    {props.set.title}
                </legend>
            </fieldset>
        );
    };
    const fieldsets = renderFieldsets(form.state.fieldsets);
    return (
        <form className={form.state.class}>
            {fieldsets}
        </form>
    );
}

FormElement变量不返回html ...根据数据模型中的标记，我需要返回不同类型的html元素。在代码中，我已经成功创建了外部字段集，但是当我在字段集中插入html元素时，它什么也没做。我将console.log放在代码块中，但显然即使尝试使用“ FormElement”，代码也不会触发...

最佳答案

您的代码中有错误。

您的FormElement应该看起来像

const FormElement = (props, index) => {
      console.log(props);
      /* ^^^ NOT APPEARING/LOGGING IN THE CONSOLE ^^^ */
      if (props.set.element === "input") {//changed from props.tags--  1
          return (
              <input key={index} name={props.name} />
          );
      }else if (props.set.element === "select") {//changed from props.tags --1
          return (
              <select key={index} />
          );
      }
      return <div>Something which is not select or input</div>; //added a fallback return. --1
  };

上面修复的错误是：

（1）props.tags更改为props.set.element。道具中没有标签组件。因此，没有任何if块被渲染，这导致该组件不返回任何东西。这导致了一个错误，说


  FormElement（...）：必须返回有效的React元素（或null）。您可能返回了undefined，数组或其他无效对象。


通过添加后备返回语句（2）可以解决此问题。

您的FieldSets应该看起来像

const Fieldset = (props, index) => {
      const elements = renderFormElements(props.set.formElements);
      return (
          <fieldset key={index}>
              <legend>
                  <span className="number fa fa-address-card"></span>
                  {props.set.title}
              </legend>
              <div>{elements}</div> // consumed the elements that was created in renderFormElements.
          </fieldset>
      );
  };

elements变量从未在渲染中使用，这导致没有FormElement出现。那是上面代码中修复的唯一错误。

我建议清理您的代码


将EnrollmentForm转换为类。
将FieldSet和FormElement移动到单独的类或至少功能组件


这将使逻辑将来更容易调试。

关于javascript - Reactjs-从数据集构建表单，FormElement不返回到render函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46735418/