Question

在我的组件中，我有：

function Message(msg) {
        //console.log('msg=', msg);
        return (
                <div>
                    {
                        msg ?
                                <div>{msg}</div> :
                                <div>Nothing</div>
                    }
                </div>
        )
    }

当我尝试在我的IDE中渲染此组件时，我得到此chromeconsole错误：

未捕获错误：对象作为React子对象无效（找到：对象用键{msg}）。如果您要渲染一组孩子，请使用而是一个数组。

如何在组件中显示msg值，即'hi'？ fiddle

Answer 1

问题是，在函数参数中，您将获得props对象，因此msg（只是参数名称）将具有props的值，因为语法为：

function Name (props){
    ...
}

在道具中你传递msg，这就是为什么它会抛出错误：

找到：带密钥的对象{msg}）

所以要么像这样使用{msg.msg}：

function Message(msg) {
    return (
        <div>
            {
                msg.msg ?
                    <div>{msg.msg}</div> :
                    <div>Nothing</div>
            }
        </div>
    )
}

或者使用解构并像这样写：

function Message({ msg }) {
   ...
}

Answer 2

您需要更改为：

 function Message({msg}) {

因为该函数使用msg键接收对象'props'。

其他方式：

 function Message(props) 
  ... {props.msg}

Answer 3

从您共享的代码中，'msg'变量是一个对象 {msg: 'hi'}，因此您必须访问该属性才能显示该字符串。

                {
                    msg ?
                            <div>{msg.msg}</div> :
                            <div>Nothing</div>
                }

更清洁的方式是使用ES6解构。

function Message({msg}) {
.
.
{
    msg ?
        <div>{msg}</div> :
        <div>Nothing</div>
}
.
.

如何在我的reactjs组件中显示属性？

3 个答案: