我是ReactJS的新手,最近试图找出一个侧边栏组件。 我有两个反应组件( SidebarNav 和 SidebarNavItem ),它们可以相互嵌套以显示结构化侧栏菜单。
SidebarNav
import React, {Component, PropTypes} from 'react';
export default class SidebarNav extends Component {
static propTypes = {
level: PropTypes.number,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
PropTypes.arrayOf(PropTypes.object)
])
};
render() {
const {level, children} = this.props;
const currentLevel = !level ? 1 : level;
let navClass;
switch (currentLevel) {
case 1:
navClass = 'tfmenu';
break;
case 2:
navClass = 'nav-second-level collpase in';
break;
default:
navClass = 'nav-third-level collpase in';
}
return (
<ul className={'nav ' + navClass}>
{React.Children.map(children, element => {
return React.cloneElement(element, {level: currentLevel});
})}
</ul>
);
}
}
SidebarNavItem
import React, {Component, PropTypes} from 'react';
export default class SidebarNavItem extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
href: PropTypes.string.isRequired,
iconClass: PropTypes.string,
level: PropTypes.number,
children: PropTypes.object
};
render() {
const {title, href, iconClass, level, children} = this.props;
return (
<li>
<a href={href}>
{iconClass && level === 1 && <i className={'fa ' + iconClass}></i>}
{level === 1 ? <span className="nav-label">{title}</span> : {title}}
{level === 2 && children && <span className="fa arrow"></span>}
{'level: ' + level}
</a>
{children && React.cloneElement(children, {level: level + 1})}
</li>
);
}
}
问题似乎存在于行中:
{children && React.cloneElement(children, {level: level + 1})}
我想在这里解释一下。 级别道具用于区分侧边栏项目的深度,以便可以应用不同的样式。当我尝试使用以下代码测试组件时。
<SidebarNav>
<SidebarNavItem href="/portal" title="Portal" iconClass="fa-home">
<SidebarNav>
<SidebarNavItem href="/portal/home1" title="Home1" />
<SidebarNavItem href="/portal/home2" title="Home2" />
</SidebarNav>
</SidebarNavItem>
<SidebarNavItem href="/signin" title="Signin" iconClass="fa-home" />
</SidebarNav>
我收到以下错误。
不变违规:对象作为React子项无效(找到: 带有键{title}的对象。如果你想渲染一个集合 children,使用数组代替或使用包装对象 来自React附加组件的createFragment(对象)。检查渲染方法
SidebarNavItem
。
有谁知道我的代码出了什么问题?非常感谢提前。
答案 0 :(得分:0)
此行{level === 1 ? <span className="nav-label">{title}</span> : {title}}
出错。它必须是反应元素(或原始值)而不是{title}
答案 1 :(得分:0)
代码的某些语法问题,{}用于变量或函数
你可以:
generate(){
return (<span>something</span>);
}
render(){
var abc = (<span>something</span>);
return (
<div>
{abc}
{this.generate()}
{abc || this.generate()}
</div>
);
}
您可能需要查看来自react路由器的这些示例,以了解它们如何实际实现导航栏。特别是侧栏示例。