如何在reactjs组件中显示属性？
如何在reactjs组件中显示属性？
提问于 2017-12-07 08:44:10
在我的部分，我有：
function Message(msg) {
//console.log('msg=', msg);
return (
<div>
{
msg ?
<div>{msg}</div> :
<div>Nothing</div>
}
</div>
)
}当我试图在我的IDE中呈现这个组件时，我会得到这个chromeconsole错误：
Uncaught :对象作为React子对象无效(找到:键{msg}的对象)。如果您打算呈现一个子集合，请使用数组代替。
如何在组件中显示msg值(例如“hi”)？小提琴
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-12-07 08:47:22
问题是，在函数参数中，您将得到props对象，以便msg (只是参数名)具有支持值，因为语法是：
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 }) {
...
}Stack Overflow用户
发布于 2017-12-07 08:49:32
你需要改为：
function Message({msg}) {因为该函数接收带有msg键的对象“props”。
其他方式：
function Message(props)
... {props.msg}Stack Overflow用户
发布于 2017-12-07 08:49:59
从您共享的代码中，'msg‘变量是一个对象{msg: 'hi'}，因此您必须访问该属性来显示字符串。
{
msg ?
<div>{msg.msg}</div> :
<div>Nothing</div>
}更清洁的方法是使用ES6破坏。
function Message({msg}) {
.
.
{
msg ?
<div>{msg}</div> :
<div>Nothing</div>
}
.
.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47690906
复制相关文章
相似问题
腾讯云开发者
