将函数提取到独立的 reactjs 组件中会抛出对象作为 React 子级无效（找到：[object Window]）

Posted 2023-03-16

【中文标题】将函数提取到独立的 reactjs 组件中会抛出对象作为 React 子级无效（找到：[object Window]）

【英文标题】：extracting a function into standalone reactjs component throws Objects are not valid as a React child (found: [object Window])

【发布时间】：2021-06-28 09:44:01

【问题描述】：

当我使用 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函数会导致报错： 对象作为 React 子级无效（找到：[object Window]）。如果您打算渲染一组子项，请改用数组。

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;

【问题讨论】：

你可以重新格式化你的代码以获得更好的可读性

您尝试返回的content 是a global variable with that name。您没有在本地正确声明它

感谢@Martin 的这一点。

你的代码中还有其他地方不小心创建了全局变量：寻找columnHeaders和rowData，它们没有在本地声明

【参考方案1】：

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;
;

您混淆了内容变量。