React动态表单问题：如何向Modal传递并渲染组件数组

我正在尝试创建一个动态表单，希望将函数式组件数组作为children传入Modal组件，并通过props.children在Modal内展示。目前能通过getUserSelector方法传递单个组件，但无法实现组件列表的渲染。尝试在块内用.map渲染组件数组时，组件无法渲染，且出现警告："Warning: Functions are not valid as a React child"。

单个组件可正常渲染的代码片段 #

import React, { useEffect, useState } from "react";
import Modal from "../components/global/templates/Modal";
import Select from "../components/global/inputs/CustomSelect";

function Home(props) {
// 默认在表单上显示的输入组件
  const getUserSelector = () => (
    <Select
      type="selector"
      defaultValues={defaultValues}
      options={emailContacts}
      retrieveSelections={retrieveSelectedContacts}
      handleChange={handleChange}
      values={selectedValues}
    />
  );

  useEffect(() => {
    console.log("Email Contacts:", emailContacts);
  }, []);

  return (
    <div>
      Click to Show Form
      <div>
        <button type="button" onClick={() => setShowUserModal(true)}>
          Show Form
        </button>
      </div>
      {/*显示Modal*/}
      {showUserModal === true ? (
        // 显示Modal
        <Modal
          header="Invite Contacts"
          handleCloseModal={() => setShowUserModal(false)}
          handleSendData={retrieveSelectedContacts}
          handleSubmit={handleSubmit}
        >
          {getUserSelector()}
        </Modal>
      ) : null}
      <div>
        <b>Selected Value: </b>
        {renderEmails()}
      </div>
    </div>
  );
}

警告信息 #

react_devtools_backend.js:4026 Warning: Functions are not valid as a
React child. This may happen if you return a Component instead of
from render. Or maybe you meant to call this function
rather than return it.
at div
at div
at form
at Modal (http://localhost:3000/static/js/bundle.js:289:25)
at div
at Home (http://localhost:3000/static/js/bundle.js:504:92)

触发错误的组件数组渲染代码片段 #

function Home(props) {
  const SelectComponent1 = <Select
  type="selector1"
  defaultValues={defaultValues}
  options={emailContacts}
  retrieveSelections={retrieveSelectedContacts}
  handleChange={handleChange}
  values={selectedValues}
/>
  const arrayList = [SelectComponent1, SelectComponent1]
  
  // 渲染组件
  const renderComponents= () => {
    return arrayList.map((Item, index) => {
      console.log("Item:", Item, "; Index:", index);
      return <div key={index}>{Item}</div>;
    });
  };
   


  useEffect(() => {
    console.log("Email Contacts:", emailContacts);
  }, []);

  return (
    <div>
      Click to Show Form
      <div>
        <button type="button" onClick={() => setShowUserModal(true)}>
          Show Form
        </button>
      </div>
      {/*显示Modal*/}
      {showUserModal === true ? (
        // 显示Modal
        <Modal
          header="Invite Contacts"
          handleCloseModal={handleClose}
          handleSendData={retrieveSelectedContacts}
          handleSubmit={handleSubmit}
        >
          {renderComponents}
        </Modal>
      ) : null}
    </div>
  );
}

问题原因与解决方案 #

问题出在你传递给Modal的children是函数本身renderComponents，而不是函数执行后的返回值。React无法直接渲染函数，必须执行函数拿到它返回的JSX元素数组。

修复方式1：调用渲染函数 #

把{renderComponents}改成{renderComponents()}，执行函数获取JSX：

<Modal
  header="Invite Contacts"
  handleCloseModal={handleClose}
  handleSendData={retrieveSelectedContacts}
  handleSubmit={handleSubmit}
>
  {renderComponents()}
</Modal>

修复方式2：直接在children中渲染数组 #

不需要额外定义渲染函数，直接在Modal的children里处理数组映射，代码更简洁：

<Modal
  header="Invite Contacts"
  handleCloseModal={handleClose}
  handleSendData={retrieveSelectedContacts}
  handleSubmit={handleSubmit}
>
  {arrayList.map((Item, index) => (
    <div key={index}>{Item}</div>
  ))}
</Modal>

注意：使用数组索引作为key仅适用于元素顺序固定的场景，如果数组元素顺序可能变化，建议使用每个元素的唯一标识作为key，避免React渲染异常。

内容的提问来源于stack exchange，提问作者tlockhart