Question

我正在尝试从渲染函数中的另一个文件返回一个组件。有问题的函数是 AccessibleTable。

如果我直接在渲染中返回函数，则有可能，如下所示：

    render() {
    return (
        <div>
            <Header onLogout={this.onLogout.bind(this)}/>
            <div>
                {this.getInfo()}
                <div style={{"height": "275px"}}> </div>
                <div className="grid grid-cols-3 gap-4">
                    <button className="bg-gray-100 border-4 border-light-blue-300 hover:border-yellow-500" onClick={this.setSelectedView}
                    >Sstuff</button>
                    <button className="bg-gray-100 border-4 border-light-blue-300 hover:border-yellow-500">More stuff</button>
                </div>

            </div>
            <AccessibleTable />
        </div>
        );
}

如果我这样做，我会收到错误

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

渲染中：

{this.selectedView}

功能：

selectedView(){
    return <AccessibleTable />;
}

无障碍表：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
];

export default function AcccessibleTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="caption table">
        <caption>A basic table example with a caption</caption>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

如何从函数返回这个组件？谢谢！

Answer 1

<块引用>

函数作为 React 子元素无效。如果您从渲染中返回 Component 而不是，则可能会发生这种情况。或者，您可能打算调用此函数而不是返回它。

正如错误所暗示的那样，selectedView 是一个 function。因此，它需要调用才能使用其产品。

用 {this.selectedView} 或 {this.selectedView()} 替换 <this.selectedView/> 将导致其底层 JSX 被返回和呈现。

从渲染中的函数返回组件

1 个答案: