Question

我想制作一个可以容纳Material-ui网格的组件。

我在这里制作了一个代码框：codesanbox

这是容器组件。 AllCards.js

// All the required imports here

const exer = [
  {
    imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
    imagealt: "react-gif",
    title: "Elongacion de columna",
    body: "Este es un ejercicio que sirve para estirar los lumbares.",
    firstButtonText: "Ver",
    secondButtonText: "Ayuda"
  },
  {
    imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
    imagealt: "react-gif",
    title: "Elongacion de cuadriceps",
    body: "Este es un ejercicio que sirve para estirar los cuadriceps.",
    firstButtonText: "Ver"
  }
];

function AllCards() {
  const [exercises, setExercises] = useState(null);

  useEffect(() => {
    setExercises(exer);
  }, [exercises]);

  let ret = exercises ? <CardGrid cards={exercises} /> : null;
  return ret;
}

export default AllCards;

这是 CardGrid.js 组件

const CardGrid = props => {
  const classes = useStyles();
  const { cards } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={3} justify="space-evenly" alignItems="center">
        {cards.map((currentCard, ind) => (
          <Grid key={ind} item xs>
            <CardItem card={currentCard} />
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

我的 CardItem.js 组件

const CardItem = props => {

  let ret = null;       
  if (props.card) {
    console.log("ITEM PROPS", props);
    ret = ( <Card . . . )
  // return { ret };     <-- THIS IS WRONG
     return ret          <-- SHOLD BE LIKE THIS
};

我遇到以下错误

Error: Objects are not valid as a React child (found: object with keys {card}). If you meant to render a collection of children, use an array instead.
    in CardItem (at CardGrid.js:49)

已解决：

在CardItem.js中，我返回{ ret }

应为return ret

Answer 1

在您的沙盒示例中，您在CardGrid.js中的代码顶部有import CardItem from "./CardGrid";。我假设您想说import CardItem from "./CardItem";

然后，我认为您的组件需要能够容纳ForwardRefs，本指南将为您提供帮助。 https://material-ui.com/guides/composition/

Answer 2

正如Thomas所指出的，您是从错误的文件中导入CardItem。另外，在CardItem内，您使用的是一个名为card的道具，还创建了一个名为card的新变量以返回组件，这将导致命名冲突并尝试渲染不允许的对象

如果您更改了变量名，它似乎可以工作。

叉子here

对象作为React子对象无效（找到：带有键{<key>}的对象）。如果要渲染子级集合，请改用数组

2 个答案: