React - 传递道具被视为对象，错误提示'objects are not valid as a react child'

Question

开始学习React，我正试图将props传递给另一个组件以根据值列表进行渲染，但在尝试时出现了错误，尽管我找不到我的代码和工作代码之间的区别。第一个组件：

const navbarCollection = [
{ id: 1, item: 'Home', ref: '#'}, 
{ id: 2, item: 'Search', ref: '#'}, 
{ id: 3, item: 'Login', ref: '#'}, 
{ id: 4, item: 'Register', ref: '#'}, 
];
function UnorderedListNavBar() {
return (
<div id='wrapper-navBarList'>
<ul className='navbar-nav mr-auto'>
{
navbarCollection.map((menuItem) => {
return (<ListItem key={menuItem.id} mykey={menuItem.item} value={menuItem.ref} />);
})
}
</ul>
</div>
)
}
export default UnorderedListNavBar;

第二个组件：

function ListItem(id, type, href) {
return (
<div id='wrapper-navBarListItem'>
<li className='list-item active'>
<a className='nav-link' href={href}>test</a>
</li>
</div>
)
}
export default ListItem;

老实说，我什么都试过了。当我将我用第一个组件发送的内容记录到第二个组件时，我会得到字符串作为结果，但当从第二个部件(或试图使用数据)进行日志记录时，它会显示一个对象。

请帮帮我，我会感谢任何帮助，尤其是解释，这样我就可以学习了。非常感谢！

Answer 1

function ListItem({mykey, value}) {
return (
<div id='wrapper-navBarListItem'>
<li className='list-item active'>
<a className='nav-link' href={value}>test</a>
</li>
</div>
)
}
export default ListItem;

您所面临的错误是因为您发送到子组件的对象与您在子组件中接收到的对象不同

Answer 2

U需要以这种方式销毁道具

function ListItem({ id, mykey, href }) {
return (
<div id="wrapper-navBarListItem">
<li className="list-item active">
<a className="nav-link" href={href}>
test {mykey}
</a>
</li>
</div>
);
}

Answer 3

//A more compact way to pass your props
const navbarCollection = [
{ id: 1, item: 'Home', ref: '#'}, 
{ id: 2, item: 'Search', ref: '#'}, 
{ id: 3, item: 'Login', ref: '#'}, 
{ id: 4, item: 'Register', ref: '#'}, 
];
function UnorderedListNavBar() {
return (
<div id='wrapper-navBarList'>
<ul className='navbar-nav mr-auto'>
{
navbarCollection.map((menuItem) => {
const {id, item, ref} = menuItem;
return <ListItem key={id} {...{id, item, href: ref}} />
})
}
</ul>
</div>
)
}
export default UnorderedListNavBar;

ListItem组件是

function ListItem(props) {
const {id, type, href} = props
return (
<div id='wrapper-navBarListItem'>
<li className='list-item active'>
<a className='nav-link' href={href}>test</a>
</li>
</div>
)
}
export default ListItem;

Answer 4

您可以使用

function ListItem(props) {
return (
<div id='wrapper-navBarListItem'>
<li className='list-item active'>
<a className='nav-link' href={props.href}>{props.item}</a>
</li>
</div>
)
}

或

function ListItem({href, item}) {
return (
<div id='wrapper-navBarListItem'>
<li className='list-item active'>
<a className='nav-link' href={href}>{item}</a>
</li>
</div>
)
}

这个组件收到了一个道具。我们可以通过props.href、props.item等调用接收组件的属性；道具"每次，所以我们都使用{}来销毁道具，然后我们可以使用href，item来调用属性。

对于以上任何一个组件，都可以这样调用：<ListItem key={menuItem.id} item={menuItem.item} href={menuItem.ref} />