Question

我正在基于构造函数中的状态构建动态构建表单。我正在成功构建外部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，但显然即使我尝试使用＆＃34; FormElement＆＃34;代码没有解雇......

Answer 1

您的代码中存在错误。

您的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，数组或其他一些无效对象。

通过添加回退return语句（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变量从未在渲染中使用，导致没有出现FormElements。这是上面代码中修复的唯一错误。

我建议您通过

清理代码

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

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

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

1 个答案: