![](/img/trans.png)
[英]Props are not passed with React.cloneElement in the render() method
[英]Error when overriding props in React.cloneElement()
我是ReactJS的新手,最近尝试构建一个侧边栏组件。 我有两个React组件( SidebarNav和SidebarNavItem ),它们可以相互嵌套以显示结构化的侧栏菜单。
边栏导航
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>
);
}
}
边栏导航项
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}的对象)。 如果您打算渲染孩子的集合,请改用数组或使用React附加组件中的createFragment(object)包装对象。 检查
SidebarNavItem
的渲染方法。
有人知道我的代码出了什么问题吗? 提前谢谢了。
此行中的错误{level === 1 ? <span className="nav-label">{title}</span> : {title}}
{level === 1 ? <span className="nav-label">{title}</span> : {title}}
。 它必须是react元素(或原始值),而不是{title}
您的代码存在语法问题,{}用于变量或函数
您可以:
generate(){
return (<span>something</span>);
}
render(){
var abc = (<span>something</span>);
return (
<div>
{abc}
{this.generate()}
{abc || this.generate()}
</div>
);
}
您可能想看一下React Router的那些示例,以了解它们如何实际实现导航侧栏。 特别是侧边栏示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.