Javascript 将函数提取到独立的reactjs组件抛出对象作为React子对象无效（找到：[对象窗口]）

当我在组件中使用useRowCellSettings函数呈现下面的组件时，它不会出错，当将useRowCellSettings提取到独立组件中时，它会抛出错误

import React from "react";
const MyDatatable = (props) => {
  let columnHeaders =  [
        {title: "Id" , accessor: 'id' , index: 0},
        {title: "Name" , accessor: 'name', width: "300px", index: 2}
        ]
        
   let rowData = [
      {id: 1, name: 'a', age: 29, qualification: 'B.com', rating: 3, profile: 'ps'},
      {id: 2, name: 'b', age: 35, qualification: 'B.Sc', rating: 5, profile: 'h'}
   ]
        
  const [headers, setHeaders] = React.useState(columnHeaders);

  const [data, setData] = React.useState(rowData);

  const renderContent = () => {

      let contentView = data.map((row, rowIdx) => {
      let id = row[keyField];
      let tds = headers.map((header, index) => {
          //grab the content of the column
      let content = row[header.accessor];
      let cell = header.custom_render_options;

      content = useRowCellSettings(cell, content);

      return (
        <td key={index} data-id={id} data-row={rowIdx}>
          {content}
        </td>
      );
    });

    return (
      <tr key={rowIdx}>
          {tds}
      </tr>
    );
            //
   }); //closes contentView variable

   return contentView;
  }

 const useRowCellSettings = (cell, content) => {

      if(cell) {
        if (typeof(cell) === "object") {
          //if (cell.type === 'image' && content) {
          if (cell.type === 'image') {
            //wrap the content with image tag & assign style from the cell
            content = content ? <img style={cell.style} src={content} /> :
                              <><input type="file"  id="img" name="img" /> </>
            }  //closes cell.type
            } //close cell == object
        else if (typeof(cell) === 'function') {
            content = cell(content);
         }
       } //closes if cell
       return content;
  }
}

将useRowCellSettings提取到独立组件中，如下所示，然后在父组件中调用新的独立组件而不是useRowCellSettings函数，会导致错误： 对象作为找到的子对象无效：[对象窗口]。如果要呈现子对象集合，请改用数组

---

您混淆了内容变量。

您需要重新格式化代码以提高可读性您尝试返回的内容是。您没有正确地在本地声明它感谢@Martin的这一点。在您的代码中还有其他地方您意外地创建了全局变量：查找ColumnHeader和rowData，它们不是在本地声明的

import React from "react";
const ImageType = (props) => {

  if(props.cell) {

    if (typeof(props.cell) === "object") {

      if (props.cell.type === 'image') {

        const content = props.content ? <img style={props.cell.style} src={content} /> : <input type="file"  id="img" name="img" accept="image/*"/>
       }  //closes cel.type

     } //close if cell == object
     else if (typeof(props.cell) === 'function') {
         const content = props.cell(content);
     }
   } //closes if cell

   return content;

}

import React from 'react';
const ImageType = props => {
    let content = null;

    if (props.cell) {
        if (typeof props.cell === 'object') {
            if (props.cell.type === 'image') {
                content = props.content ? (
                    <img style={props.cell.style} src={props.content} />
                ) : (
                    <input type='file' id='img' name='img' accept='image/*' />
                );
            }
        } else if (typeof props.cell === 'function') {
            content = props.cell(props.content);
        }
    }

    return content;
};