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

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，但显然即使我尝试使用“FormElement”代码也没有触发 ...

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。 Prop 中没有标签组件。所以没有一个 if block 被渲染，这导致组件不返回任何东西。这导致了一个错误，说

FormElement(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

这已通过添加后备返回语句 (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 出现。这是上述代码中修复的唯一错误。

我建议通过以下方式清理您的代码

1. 将 EnrollmentForm 转换为一个类。
2. 将 FieldSet 和 FormElement 移动到单独的类或至少是功能组件

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