在我的组件中,我有:
function Message(msg) {
//console.log('msg=', msg);
return (
<div>
{
msg ?
<div>{msg}</div> :
<div>Nothing</div>
}
</div>
)
}
当我尝试在我的IDE中渲染此组件时,我得到此chromeconsole错误:
未捕获错误:对象作为React子对象无效(找到:对象 用键{msg})。如果您要渲染一组孩子,请使用 而是一个数组。
如何在组件中显示msg值,即'hi'? fiddle
答案 0 :(得分:2)
问题是,在函数参数中,您将获得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 }) {
...
}
答案 1 :(得分:0)
您需要更改为:
function Message({msg}) {
因为该函数使用msg键接收对象'props'。
其他方式:
function Message(props)
... {props.msg}
答案 2 :(得分:0)
从您共享的代码中,'msg'变量是一个对象
{msg: 'hi'}
,因此您必须访问该属性才能显示该字符串。
{
msg ?
<div>{msg.msg}</div> :
<div>Nothing</div>
}
更清洁的方式是使用ES6解构。
function Message({msg}) {
.
.
{
msg ?
<div>{msg}</div> :
<div>Nothing</div>
}
.
.