在 React.cloneElement(） 中覆盖 props 时出错

Error when overriding props in React.cloneElement()

本文关键字：覆盖 props 出错 React cloneElement      更新时间：2023-09-26

我是ReactJS的新手，最近试图开发一个侧边栏组件。我有两个反应组件（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 子对象无效（发现： 带有键 {标题} 的对象）。如果您打算呈现 子项，改用数组或使用 createFragment（object） 来自 React 插件。检查渲染方法 的SidebarNavItem .

有谁知道我的代码出了什么问题？提前非常感谢。

此行中的错误{level === 1 ? <span className="nav-label">{title}</span> : {title}} 。它必须是反应元素（或原始值）而不是{title}

代码的一些语法问题，{ } 用于变量或函数

您可以：

generate(){
    return (<span>something</span>);
}
render(){
    var abc = (<span>something</span>);
    return (
        <div>
        {abc}
        {this.generate()}
        {abc || this.generate()} 
        </div>
    );
}

你可能想看看 react router 中的这些示例，看看它们是如何实际实现导航侧边栏的。特别是侧边栏示例。

反应示例

相关文章：