将函数提取到独立的 reactjs 组件中抛出 Objects are not valid as a React child (found: [object Window])

Question

当我使用 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;

}

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

你混淆了内容变量。

将函数提取到独立的 reactjs 组件中抛出 Objects are not valid as a React child (found: [object Window])

extracting a function into standalone reactjs component throws Objects are not valid as a React child (found: [object Window])

javascript

reactjs

react-component

react-functional-component