將 function 提取到獨立的 reactjs 組件中會引發 Objects are not valid as a React child (found: [object Window])

Question

當我在組件中使用useRowCellSettings將我的組件渲染為 function 時，它沒有錯誤地工作，當將 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 function 會導致錯誤： Objects are not valid as a React child (found: [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;

}

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

您混淆了內容變量。