Question

我正在尝试在React中创建一个组件。有时我没有将信息存储在变量中，而只是调用{variable}，而不是列出要渲染的JSX的所有行。除了我现在坚持的情况之外，此方法对于所有其他情况都很好。我已经剥离了所有JSX，并留下了一个空的div作为测试器，但仍然出现相同的错误：

未捕获的不变变量：对象作为React子对象无效（找到：带有键{message}的对象）。如果要渲染子级集合，请改用数组。

我将非常感谢您的帮助！预先感谢

import React from 'react';
import classes from './Inbox.module.css';


const Cancel = (props) =>{
    let message;
    message =(<div></div>);

    return(
        {message}
    );
}

export default Cancel;

Answer 1

您的问题在这里，

return(
    {message}
);

{message}是一个对象，您正在尝试渲染该对象。

您有两种处理方法，

使用Fragments

return (
  <React.Fragment> {message} </React.Fragment>
)

或者简短的语法是

return (
  <> {message} </>
)

或者是另一种方式，

return( 
   message      //without curly braces , not good idea because you may have multiple other elements 
)

Answer 2

通过执行此操作的方式，您返回了一个对象message，我想您想像这样{message}来包装<>{message}</>，这样您就可以返回jsx并内插变量{{ 1}}

希望这会有所帮助。

错误的永久违反：对象无效，无法作为React子对象

2 个答案: